Html 使div覆盖整个图像

我试图创建一个不透明的div，在图像上加上一点颜色。 我似乎无法使它完全符合整个图像。我尝试过很多不同的变体，下面是我能想到的最好的。 我知道这可能很简单，但我想我需要一些帮助

.old{
位置：相对位置；
}
.掩护{
背景颜色：蓝色；
宽度：100%；
高度：200vh；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.5；
}

---

您应该用另一个div包装封面div和图像，并将其位置设置为相对位置。然后，您应该将图像的高度和宽度设置为100%，以实现包装div，并且还应该将cover div位置设置为绝对位置，并将其扩展到包装div

如果要为图像设置自定义高度和宽度，则应将这些属性设置为wrapper div

.old{
身高：100%；
宽度：100%；
}
.掩护{
背景颜色：蓝色；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.5；
}
.包装纸{
位置：相对位置；
}

---

您应该用另一个div包装封面div和图像，并将其位置设置为相对位置。然后，您应该将图像的高度和宽度设置为100%，以实现包装div，并且还应该将cover div位置设置为绝对位置，并将其扩展到包装div

如果要为图像设置自定义高度和宽度，则应将这些属性设置为wrapper div

.old{
身高：100%；
宽度：100%；
}
.掩护{
背景颜色：蓝色；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.5；
}
.包装纸{
位置：相对位置；
}

---

我想这就是您想要的，基本上我为图像和div添加了一个容器，并强制div位置相对于

容器


正文{
保证金：0；
}
.集装箱{
位置：相对位置；
}
.掩护{
背景颜色：蓝色；
宽度：100%；
身高：99%；
位置：绝对位置；
排名：0；
左：0；
不透明度：0.5；
}
我想这就是您想要的，基本上我为图像和div添加了一个容器，并强制div位置相对于
容器


正文{
保证金：0；
}
.集装箱{
位置：相对位置；
}
.掩护{
背景颜色：蓝色；
宽度：100%；
身高：99%；
位置：绝对位置；
排名：0；
左：0；
不透明度：0.5；
}
您不需要使用img，只需使用背景色即可



.掩护{
背景颜色：蓝色；
背景：url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg)不重复；
背景尺寸：封面；
宽度：100%；
高度：200vh；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.5；
--过滤器：模糊（10px）；
}
.封面组{
背景：蓝色；
宽度：100%；
不透明度：0.5；
身高：100%；
}
您不需要使用img，只需使用背景色即可



.掩护{
背景颜色：蓝色；
背景：url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg)不重复；
背景尺寸：封面；
宽度：100%；
高度：200vh；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
不透明度：0.5；
--过滤器：模糊（10px）；
}
.封面组{
背景：蓝色；
宽度：100%；
不透明度：0.5；
身高：100%；
}
如果图像上不需要
alt
文本，可以使用带有背景的伪元素作为另一个元素的替代



。封面{
背景色：rgba（0,0,255,0.5）；
宽度：100%；
高度：200vh；
位置：相对位置；
}
在…之后{
内容：''；
背景图像：url（'https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
背景大小：100%；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：-1；
}

如果图像上不需要
alt
文本，可以使用带有背景的伪元素作为另一个元素的替代



。封面{
背景色：rgba（0,0,255,0.5）；
宽度：100%；
高度：200vh；
位置：相对位置；
}
在…之后{
内容：''；
背景图像：url（'https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
背景大小：100%；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：-1；
}

这只是一种简单的方法，可以覆盖整个图像。将图像包装在一个div中，并使用CSS
pseudo
选择器进行操作。就像下面


。封面{
位置：相对位置；
宽度：100%；
身高：100%；
}
.封面{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0255,0.5）；
内容：''；
z指数：2
}
这只是一种简单的方法，可以覆盖整个图像。将图像包装在一个div中，并使用CSS
pseudo
选择器进行操作。就像下面


。封面{
位置：相对位置；
宽度：100%；
身高：100%；
}
.封面{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0255,0.5）；
内容：''；
z指数：2
}

您是否尝试过将图像用作背景？谢谢，这是一个不错的选择！你试过用图片作为背景吗？谢谢，一个很好的选择！天啊！刚刚看到你的解决方案和我的一样：P+1mg！刚刚看到你的解决方案和我的一样：P+1
<div class ="cover">
  <div >
  </div>   
</div>


.cover{
 background-color: blue;   
 background:url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg) no-repeat;
 background-size:cover;
 width: 100%;
 height: 200vh;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0.5;
 --filter:blur(10px);
}
.cover div{
  background:blue;
  width:100%;
  opacity:0.5;
  height:100%;
}