在背景图片上方添​​加透明色图层

Question

我需要在背景图像上添加透明的彩色图层。我尝试用rgba做这个但没有结果。

我现在得到的是：

page-heading {
    background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
    opacity: 0.9;
    position: relative;
    text-align: center;
    padding: 72px 0px;
}

我知道背景颜色是无法加载图像时的后备颜色。如何以正确的方式在其上添加图层？

Answer 1

使用简单的box-shadow插页：

.page-heading {
    background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
    box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}

JS小提琴：http://jsfiddle.net/ghorg12110/q0cLf2s7/

Answer 2

我看到很多人在这里创建了一个额外的元素或伪元素，但你不需要两个元素来创建这个效果。您可以简单地声明两个背景图像。其中一个是原始图像，另一个是线性渐变。请参阅此Fiddle以查看效果是否有效。

background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
      url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");

请注意，您首先必须声明渐变然后声明图像（我第一次尝试制作时总是会出错）

Answer 3

你可以用下面的小提琴这样的渐变来做到这一点。

左边是原始图像。右边是应用了渐变的那个。

.block   {
    width: 300px;
    height: 300px;
    display: inline-block;
}

.og  {
  background: url(http://placehold.it/300x300);
}

.ed  {
  background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}

<div class="block og"></div>
<div class="block ed"></div>

Answer 4

使用伪元素......

.page-heading {
    background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
    opacity: 0.9;
    position: relative;
    text-align: center;
    padding: 72px 0px;
}

.page-heading:before {
    content: "";
    background: rgba(36, 70, 105, 0.74);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="page-heading">
    
</div>

Answer 5

您可以使用伪元素放置在您的上面。这样您就不会使用额外的DOM元素。

.element {
    background: url('http://lorempixel.com/500/500/');
    height: 500px;
    width: 500px;
    position: relative;
}

.element:after {
    background: rgba(0,0,0,0.8);
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

JSFiddle：http://jsfiddle.net/volzy/LLfhm0kc/1/

Answer 6

body{
background-color: #ccc;
margin:0px;

}

.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;

}

我使用身体，但元素可能是其他东西 嗨，这里有一个小提琴：

http://jsfiddle.net/5f46znzx/

您正在寻找什么？

请记住，不透明度会使用不透明度集来转换每个元素。 如果你不需要内部元素采用不透明度，我建议消除它。

Answer 7

标题上方还需要另一个框。想象一下，这是你的HTML：

<div class="page-heading">
   <div class="page-heading-fake">
   </div>
</div>

你可以拥有这个CSS

.page-heading {
    background: url(yourimg.png);
    position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
    position: absolute;
    top: 0;
    left: 0;
    background-color:  rgba(36, 70, 105, 0.74) ;
}