我有一个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类中没有其他元素，则需要为它定义宽度和高度
其他回答
使用前伪类和使用不透明度
.left-side {
position: relative;
background-color: #5200ff; /*bg color*/
}
.left-side::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(./images/img.jpeg); /*bg image*/
background-size: cover;
background-position: 100%;
opacity: 0.22; /*use opacity to show bg color */
}
你也可以使用线性渐变和图像: 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
另一个带有SVG的内联覆盖图像(注意:如果你在SVG代码中使用#，你必须urlencode !):
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
no-repeat center center/cover,
url('overlayed-image.jpg') no-repeat center center/cover;
这里有一个更简单的技巧，只有css。
<div class="background"> </div> <style> .background { position:relative; height:50px; background-color: rgba(248, 247, 216, 0.7); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); } .background:after { content:" "; background-color:inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
我只是在目标背景div上使用background-image css属性。 注意background-image只接受渐变颜色函数。 所以我使用线性渐变添加相同的叠加颜色两次(使用最后的rgba值来控制颜色不透明度)。
此外，还找到了以下两个有用的资源:
在背景图像上添加文本(或任何其他内容的div):英雄图像 只模糊背景图像，不模糊上面的div:模糊背景图像
HTML
<div class="header_div">
</div>
<div class="header_text">
<h1>Header Text</h1>
</div>
CSS
.header_div {
position: relative;
text-align: cover;
min-height: 90vh;
margin-top: 5vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
filter: blur(2px);
}
.header_text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
