设置背景大小：包含在叠加层

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

如果您只是希望图像比实际颜色更暗，可以将其放在黑色背景的容器中，并使图像本身具有50％的不透明度。
通过使容器成为内联块，它将自己塑造成内部图像的大小，因此您不必指定显式大小。

.container {
  background:black;
  display:inline-block;
}
.container img {
  opacity:.5;
  vertical-align:top;
}

<div class="container">
<img src="https://i.stack.imgur.com/30Bby.jpg">
</div>

作为参考，图片本身如下：

Answer 2

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

工作小提琴https://jsfiddle.net/am2hyf3d/

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

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

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

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

Answer 3

在没有额外元素的情况下使背景图像变暗的几种方法：

div {/* commun css for demo divs */
width:180px;
height:180px;
margin:10px;
background-image:url(http://lorempixel.com/180/180);
color:white
}
.gradient {
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(http://lorempixel.com/180/180);
}
.shadow {
box-shadow:inset 0 0 0 180px rgba(0,0,0,0.5);
}
.blend {
background-color:rgba(0,0,0,0.5);
background-blend-mode:multiply;
}
/* extra for layout */
div {
display:inline-flex;
vertical-align:top;
align-items:center;
justify-content:center;
text-align:center;
font-size:2em;
}

<div class="gradient">darken gradient</div>
<div class="shadow">darken shadow</div>
<div>plain normal</div>

<div class="blend">darken blend-mode</div>