3回答

好帮手慕粉

2020-04-28

同学你好，关于同学的问题回答如下：

1、同学自己也说了，因为图片素材大小不一样，就像我们拿两张纸质的图片，你把小的叠在大的上面，肯定是不能覆盖的，同学可以给两个图片设置相同的大小，这样就能叠在一起了。

2、同学的这个描述：

可能是因为两个图片大小不一致，而同学又设置了top:100px，恰巧使遮罩层盖住了图片，其实是没有的，老师选取了两个大小一样的图片：

就重叠在一起了：

3、不知道同学为什么要实现这个效果呢，一般是没有给背景图再设置一个背景图的，只有在上面加遮罩层的。

祝学习愉快~

0

好帮手慕粉

2020-04-27

同学你好，关于同学的问题回答如下：

1、我们可以先去除网页中的间隙：

2、当定位加给main.cover上时，由于.top是块级元素，占据位置，元素会按顺序进行排列，所以cover就会被撑到下一行：

3、而把定位设置给main.cover img时，设置的left和top定位值就生效了，就可以把cover定在top上。同学想要实现的效果是需要通过定位加定位值来实现的，也就是把cover定在top上，那么我们不光要给其设置absolute，也要设置top等值。

祝学习愉快~

0

hanny前端学习

h 或者这么说，就是在main .cover上绝对定位，实际上也可以让遮盖层覆盖图片，但是由于遮盖层太大，所以不会完全适应图片大小。然而在main .cover img上设置，遮盖层就可以适应图片大小。

h020-04-27

共2条回复

好帮手慕粉

2020-04-27

同学你好，根据同学的描述，老师并不能理解同学想要实现的效果呢。建议同学将完整的代码粘贴上来：

祝学习愉快~

0

hanny前端学习

h CSS是这样的 .main .top{ width:100%; height:600px; } .main .top img{ width:100%; height:600px; } .main .cover img{ position:absolute; top:100px; left:0; background-color:#000; width:100%; height:600px; opacity:0.5; } HTML是这样的 <div class="main"> <!-- 显示图 --> <div class="top"> <img src="images/1.jpeg" alt="pic"/> </div> <!-- 遮罩层 --> <div class="cover"> <img src="images/opacity.png" alt="cover"/> </div> <!-- 遮罩层元素 --> <div class="coverWords"> <!-- 文字 --> <div class="coverWords-words">My Beautiful Life</div> <!-- 按钮 --> <button>LOOK MORE &gt;</button> </div> 问题就在遮盖层的绝对定位是用在main.cover 还是main.cover img上。

h020-04-27

共1条回复