我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?
这是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
当前回答
另一个带有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: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
你可以:
background: url('../img/bg/diagonalnoise.png');
然后为不透明度颜色创建一个新样式:
.colorStyle{
background-color: rgba(248, 247, 216, 0.7);
opacity: 0.8;
}
将不透明度更改为低于1的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。
从css技巧…有一个一步的方法来做到这一点，没有z索引和添加伪元素-需要线性梯度，我认为这意味着你需要CSS3支持
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。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>
这是最基本的。下面是一个使用示例，其中我从background切换到background-image，但两个属性都是相同的。
body { margin: 0; } div { height: 110px !important; padding: 1em; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: 600; color: white; text-shadow: 0 0 2px #333; } .background { background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */ } .col-one { background-color: rgb(255, 255, 0); } .col-two { background-color: rgb(0, 255, 255); } .col-three { background-color: rgb(0, 255, 0); } <div class="background col-one"> 1. Background </div> <div class="background col-two"> 2. Background </div> <div class="background col-three"> 3. Background </div>
请等一下!加载外部模式需要一些时间。
这个网站似乎很慢…
当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心z指数。
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);
}
希望能有所帮助
