设置背景大小：包含覆盖图

我试图在background-image上应用覆盖图，其中图像的属性为background-size: contain。对于我想应用于其上的叠加层，它没有背景图像。所有它是一个黑色的背景色与不透明度：设置背景大小：包含覆盖图

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

，我想覆盖的图像是600×600。我也希望同样适用于覆盖层，但我不能，因为它不是图像;它只是一个黑色的背景。如何在不设置硬编码宽度且不使用background-size: contain的情况下为叠加层获得相同的方形尺寸？

来源

2017-03-28 patrickhuang94

请为一个完整的工作示例提供足够的代码。 HTML与适当的CSS。 –

'background-size：contains'只适用于背景图片。 – UncaughtTypeError

您如何期望使用背景色？没有比例保持... – DaniP

如果您只是想让图像比实际颜色暗一些，可以将它放在背景为黑色的容器中，并为图像本身提供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>

仅供参考，图片本身看起来是这样的：

来源

2017-03-28 18:04:14

如果你想要一个覆盖透明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); 
}

来源

2017-03-28 18:06:04 lhavCoder

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

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>

来源

2017-03-28 18:08:43

设置背景大小：包含覆盖图

回答

相关问题