我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?
这是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
当前回答
你也可以使用线性渐变和图像: 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
其他回答
然后你需要一个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%;
}
请访问https://stackoverflow.com/a/18471979/193494查看我的回答，了解可能的解决方案的全面概述:
使用线性渐变的多个背景， 多个背景与生成的PNG，或 样式化:在伪元素之后作为次要背景层。
另一个带有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;
试试这个。对我有用。
.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;
}
使用前伪类和使用不透明度
.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 */
}
