背景图像上的半透明颜色层？

Question

我有一个DIV，我想把一个模式作为背景。这种模式是灰色的。所以为了让它更好看一些，我想把一个透明的颜色“层”放在上面。以下是我尝试过的但没有奏效的。有没有办法将彩色图层放在背景图片上？预先感谢您的回复。干杯。马克。

这里是我的CSS：

background: url('../img/bg/diagonalnoise.png'); 
background-color: rgba(248, 247, 216, 0.7); 

Answer 1

这就是：

.background { 
    background:url('../img/bg/diagonalnoise.png'); 
    position: relative; 
} 

.layer { 
    background-color: rgba(248, 247, 216, 0.7); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

HTML此：

<div class="background"> 
    <div class="layer"> 
    </div> 
</div> 

当然，你需要定义的宽度和高度与.background类，如果里面没有其他元素的话

Answer 2

然后，您需要使用bg图像和它与背景颜色的内容元素的包装元素：

<div id="Wrapper"> 
    <div id="Content"> 
    <!-- content here --> 
    </div> 
</div> 

和CSS：

#Wrapper{ 
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px; 
} 

#Content{ 
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%; 
} 

Answer 3

见我的答案在https://stackoverflow.com/a/18471979/193494进行了全面的概述可能的解决方案：

1. 使用多个背景的线性梯度，
2. 带有生成的PNG的多个背景，或
3. 样式：在伪元素之后充当辅助背景层。

Answer 4

试试这个。适用于我。

.background { 
    background-image: url(images/images.jpg); 
    display: block; 
    position: relative; 
} 

.background::after { 
    content: ""; 
    background: rgba(45, 88, 35, 0.7); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
} 

.background > * { 
    z-index: 10; 
} 

Answer 5

我知道这是一个非常古老的线程，但它显示在谷歌的顶部，所以这里有另一种选择。

这是纯粹的CSS，不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); 

有针对的box-shadow功能使用数量惊人的。

Answer 6

从CSS-技巧...有一个一步到位的方式来做到这一点没有Z-索引和添加伪elements--需要线性渐变，我觉得意味着你需要支持CSS3

.tinted-image { 
    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    /* your image */ 
    url(image.jpg); 
} 

Answer 7

我我已经使用这种方法将颜色色调以及渐变应用于图像，以便在无法控制图像颜色配置文件时使动态重叠文本更容易识别。你不必担心z-index。

HTML

<div class="background-image"></div> 

SASS

.background-image { 
    background: url('../img/bg/diagonalnoise.png') repeat; 
    &:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(248, 247, 216, 0.7); 
    } 
} 

CSS

.background-image { 
    background: url('../img/bg/diagonalnoise.png') repeat; 
} 

.background-image:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background: rgba(248, 247, 216, 0.7); 
    } 

希望它可以帮助

Answer 8

为什么这么复杂？你的解决方案几乎是正确的，除了这是一种更容易的方式使图案透明和背景色固体。 PNG可以包含透明胶片。因此，使用photoshop将图案设置为70％并保留图片以使图案透明。那么你只需要一个选择器。作品跨浏览器。

CSS：

.background { 
    background: url('../img/bg/diagonalnoise.png');/* transparent png image*/ 
    background-color: rgb(248, 247, 216); 
} 

HTML：

<div class="background"> 
    ... 
</div> 

Answer 9

您还可以使用线性渐变和图像： http://codepen.io/anon/pen/RPweox

.background{ 
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), 
    url('http://www.imageurl.com'); 
} 

这是因为线性渐变函数创建一个添加到背景堆栈的图像。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 10

.background 
{ 
    background: linear-gradient(rgba(248, 247, 216, 0.7), rgba(248, 247, 216, 0.7)), url('../img/bg/diagonalnoise.png') no-repeat center fixed; 
    background-size:cover; 
} 

Answer 11

可以使用半透明像素，它可以生成例如here，甚至用base64 下面是白色的50％为例：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=), 
url(../img/leftpanel/intro1.png); 
background-size: cover, cover; 

• 而不上传

• 没有额外的html

• 我想加载应该比盒子阴影或线性渐变更快