我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?
这是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
当前回答
# 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 >
其他回答
试试这个。对我有用。
.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;
}
当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心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);
}
希望能有所帮助
然后你需要一个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%;
}
我只是在目标背景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%);
}
您可以使用半透明像素，例如，您可以在base64中生成它 下面是一个白人占50%的例子:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
没有上传 无需额外的HTML 我想加载应该比盒影或线性渐变更快
