html - 设置背景大小 : contain on an overlay

Question

我正在尝试在 background-image 上应用叠加层，其中图像具有属性 background-size: contain。对于我想在其上应用的叠加层，它没有背景图像。它只有一个不透明的黑色背景颜色:

.overlay {
    background-color: black;
    background-size: contain; /* this isn't working */
    opacity: 0.5;
}

我要叠加的图像是 600x600。我也想在叠加层上应用相同的内容，但我不能，因为它不是图像；它只是一个黑色的背景。如何在不设置硬编码宽度且不使用 background-size: contain 的情况下为叠加层获得相同的方形尺寸？

Answer 1

如果你想要一个覆盖透明的 div，请检查这个。我通常这样做。我有一个包含我的背景图像和黑色 div 的容器 div，所需的不透明度为 0.5(或任何其他值)。

工作 fiddle https://jsfiddle.net/am2hyf3d/

设置容器的宽度和高度为固定值

#container{
height:300px;
width:300px;
}

我将容器内的两个 div 的宽度和高度设置为占据容器的整个空间

#overlay{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
}