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>

老师，请检查

慕移动4506339 2022-10-23

源自：过渡与动画 2-9 自由编程

收起

1回答

好帮手慕慕子 2022-10-23 16:29:39

同学你好，思路是对的，但是由于图片下方默认存在的空白间距，导致文字在该间距时就显示了，效果不美观，建议优化：调整图片为块元素，清除默认间距，示例：

祝学习愉快~

收起回答

提问者慕移动4506339 #1

老师，不是很明白你的意思，空白间距在哪里，文字在该间距时就显示了，是什么意思？最好能在网页效果中指出来

2022-10-23 16:49:59
好帮手慕慕子回复提问者慕移动4506339 #2

同学你好，不是很好截效果图，可以给div添加了一个边框，方便查看图片下方的空白的间距，如下：
也就意味着文字先在图片下方的空白区域显示，可能由于图片的颜色比较淡，影响并不明显，但还是推荐参考老师第一次给出的方案，解决图片下方默认存在的间距。
祝学习愉快~

2022-10-23 17:07:33