遮罩层覆盖问题

先放代码~

</div>

</div>

这里我主要想解决的问题就是想让覆盖层全部盖满图片。但是在设置CSS样式的时候发现一个问题不是很理解。首先我分别尝试了在.main .opacity（遮罩层父级）和.main .opacity img（遮罩层子级）下设置绝对定位。在父级上设置绝对定位出现的效果是遮盖层无法完全遮住图片（遮盖层比图片大很多），但是绝对定位设置在img上，马上就覆盖完全了。

这里的原理是什么呢？希望解答谢谢！

danny前端学习 2020-04-27

源自：项目：网页布局案例 2-8 主体部分的底部

收起

3回答

好帮手慕粉 2020-04-28 09:40:15

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

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

2、同学的这个描述：

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

就重叠在一起了：

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

祝学习愉快~

收起回答

好帮手慕粉 2020-04-27 18:53:17

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

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

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

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

祝学习愉快~

收起回答

提问者 danny前端学习 #1

额，实际上我的问题是。其实一开始的代码是main .cover就是在img的父级上设置绝对定位，但是这样设置不能实现让遮盖层完全覆盖图片因为我遮盖层的图片素材要大于图片。然后我才改成main .cover img并最后实现了将遮盖层完全覆盖图片的。我想知道的是，在图片素材大小不一样的时候，为什么在父级上定位不能实现完全覆盖呢？

2020-04-27 22:08:58
提问者 danny前端学习 #2

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

2020-04-27 22:13:59

好帮手慕粉 2020-04-27 17:35:19

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

祝学习愉快~

收起回答

提问者 danny前端学习 #1

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 ></button> </div> 问题就在遮盖层的绝对定位是用在main.cover 还是main.cover img上。

2020-04-27 18:04:36