我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?
这是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
当前回答
你也可以添加不透明度叠加颜色。
而不是做
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的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。
其他回答
使用前伪类和使用不透明度
.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 */
}
# img-div { 身高:100 vh; 背景图片:url (https://images.pexels.com/photos/46160/field -云的天空-地球- 46160. - jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260”); 背景位置:中心; background-size:封面; 平铺方式:不再重演; 位置:相对; ｝ # overlay-div { Background-color: rgba(0,0,0,0.5); 身高:100 vh; 位置:相对; ｝ < div id = " img-div " > < div id = " overlay-div " > < / div > < / div >
你也可以使用线性渐变和图像: 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
为什么这么复杂?你的解决方案几乎是正确的，除了它是一种更容易使图案透明和背景色纯色的方法。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>
请等一下!加载外部模式需要一些时间。
这个网站似乎很慢…
下面就是:
.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类中没有其他元素，则需要为它定义宽度和高度
