背景图像上的半透明颜色层？
我有一个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的全面概述：;
- 使用具有线性渐变的多个背景，
- 多个背景与生成的PNG，或
- 造型：在伪元素之后作为辅助背景层。
为什么这么复杂？ 你的解决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; }
