使 div 覆盖整个图像

Question

我正在尝试创建一个不透明的 div，在图像上略带颜色。我似乎无法让它完全适合整个图像。我尝试了很多不同的变体，以下是我能想到的最好的。我知道这可能很简单，但我想我需要一些帮助，哈哈。

.old{
    position: relative;
}

.cover{
 background-color: blue;   
 width: 100%;
 height: 200vh;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0.5;
}

<div class ="cover">
    
</div>

<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">

Answer 1

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

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

 .old{
        height: 100%;
        width: 100%;
    }
    
    .cover{
     background-color: blue;   
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     opacity: 0.5;
    }
    
    .wrapper {
      position: relative;
    }

 <div class='wrapper'>
        <div class ="cover">

        </div>
        <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg">
    </div>

Answer 2

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

body {
  margin: 0;
}
.container {
 position: relative;
}

.cover {
 background-color: blue;   
 width: 100%;
 height: 99%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.5;
}

<div class="container">
  <div class ="cover">

  </div>

  <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

Answer 3

您不需要使用 img，只使用背景颜色。

https://jsfiddle.net/hu3wfc76/

<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%;
}

Answer 4

如果您不需要在该图像上显示 alt 文本，则可以使用带背景的伪元素替代其他元素。

<div class="cover"></div>

.cover {
  background-color: rgba(0, 0, 255, 0.5);   
  width: 100%;
  height: 200vh;
  position: relative;
}

.cover::after {
  content: ' ';
  background-image: url('https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

https://codepen.io/koralarts/pen/RwPBWVd

Answer 5

只是一种叠加整个图像的简单方法。将图像包裹在 div 中并使用 CSS pseudo 选择器。就像下面

.cover{
 position:relative;
 width: 100%;
 height: 100%;
}


.cover::before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,255,0.5);
  content:'';
  z-index:2
}

  <div class ="cover">
      <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

使 div 覆盖整个图像

Make div cover whole image

html

css

opacity