时间戳

首页 > 解决方案 > 让 div 覆盖整个图像

html - 让 div 覆盖整个图像

问题描述

我正在尝试在图像上创建一个带有轻微颜色的不透明 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%">

标签： htmlcssopacity

解决方案

您应该用另一个 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>

推荐阅读