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

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

这是我的CSS:

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

这里是:

 .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类定义一个宽度和高度,如果里面没有其他元素的话

我知道这是一个非常古老的线索,但它显示在谷歌的顶部,所以这是另一种select。

这个是纯粹的CSS,不需要额外的HTML。

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

box-shadow特性的使用数量惊人。

从CSS技巧…有一种方法来做到这一点,没有Z索引和添加伪元素 – 需要线性渐变,我认为你需要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); } 

你也可以使用线性渐变和图像: 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'); } 

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

然后,您需要一个包含bg图像的包装元素,并在其中包含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%; } 

尝试这个。 为我工作。

 .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; } 

我已经使用这种方法将颜色色调以及渐变应用于图像,以便在无法控制图像颜色configuration文件时,使dynamic重叠文本更易于清晰易辨。 你不必担心z-index。

HTML

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

上海社会科学院

 .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); } 

希望能帮助到你

请参阅我的回答在https://stackoverflow.com/a/18471979/193494有关可能的解决scheme的全面概述:;

  1. 使用具有线性渐变的多个背景,
  2. 多个背景与生成的PNG,或
  3. 造型:在伪元素之后作为辅助背景层。

为什么这么复杂? 你的解决scheme几乎是正确的,除了这是一种更容易使图案透明和背景色牢固的方法 。 PNG可以包含透明胶片。 因此,使用photoshop将图案设置为透明,将图层设置为70%并重新保存图像。 那么你只需要一个select器。 作品跨浏览器。

CSS:

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

HTML:

 <div class="background"> ... </div> 
 .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; }