2-9 自由编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 400px;
overflow: hidden;
position: relative;
}
img {
width: 400px;
height: 380px;
}
p {
width: 400px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 28px;
color: white;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0px;
top: 400px;
transition: top 1s linear 0s;
}
div:hover p {
top: 300px;
}
</style>
<body>
<div>
<img src="images/duck.png">
<p>这是一只小黄鸭</p>
</div>
</body>
</html>老师，请检查
5
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2022-10-23 16:29:39
同学你好，思路是对的，但是由于图片下方默认存在的空白间距，导致文字在该间距时就显示了，效果不美观，建议优化：调整图片为块元素，清除默认间距，示例：
祝学习愉快~
-
同学你好，不是很好截效果图，可以给div添加了一个边框，方便查看图片下方的空白的间距，如下：
也就意味着文字先在图片下方的空白区域显示，可能由于图片的颜色比较淡，影响并不明显，但还是推荐参考老师第一次给出的方案，解决图片下方默认存在的间距。
祝学习愉快~
2022-10-23 17:07:33
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星