背景图像上的半透明彩色层?

我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?

这是我的CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
619105 次浏览
小开
最佳答案

下面就是:

.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类中没有其他元素，则需要为它定义宽度和高度

小开

然后你需要一个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中的回答:

  1. 使用线性渐变的多个背景，
  2. 多个背景与生成的PNG，或
  3. 样式化:在伪元素之后作为次要背景层。
小开

试试这个。对我有用。

.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;
}
小开

我知道这是一个非常旧的线程，但它显示在谷歌的顶部，所以这里有另一个选项。

它是纯CSS，不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

盒影特性的应用数量惊人。

小开

从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);
}
小开

当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心z指数。

超文本标记语言

<div class="background-image"></div>

萨斯

.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);
}

希望能有所帮助

小开

为什么这么复杂?你的解决方案几乎是正确的，除了它更容易使图案透明，背景色纯色。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>

请等一下!加载外部模式需要一些时间。

这个网站似乎很慢…

小开
你也可以使用线性渐变和图像: http://codepen.io/anon/pen/RPweox < / p > 
.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

小开
你可以使用一个半透明的像素，你可以生成例如在这里，甚至在base64中 下面是一个白色50%的例子:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

  • 没有上传

  • 无需额外的HTML

  • 我想加载应该比盒影或线性渐变更快

小开

这里有一个更简单的技巧，只有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>

小开

另一个SVG作为内联覆盖图像(注意:如果你在SVG -code中使用#，你必须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;
小开
我只是在目标背景div上使用了background-image css属性 注意background-image只接受渐变颜色函数 所以我使用线性渐变添加相同的叠加颜色两次(使用最后的rgba值来控制颜色不透明度)

此外，还找到了以下两个有用的资源:

  1. 在背景图像上添加文本(或带有任何其他内容的div): 英雄的形象
  2. 只模糊背景图像，不模糊顶部的div: 模糊背景图像

超文本标记语言

<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%);
}
小开

你也可以添加不透明度叠加颜色。

而不是做

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的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。

小开 

#img-div{
height: 100vh;
background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}


#overlay-div{
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
position: relative;
}
<div id="img-div">
<div id="overlay-div"></div>
</div>

小开

使用前伪类和使用不透明度

.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 */
}
小开

实际上，我以不同的方式使用了:before，我只使用了一个HTML元素<div>，只使用了一个CSS类名，并使用了伪元素技巧:

.background {
/* ↓↓↓ the decorative CSS */


font-family: tahoma;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-radius: 8px;
overflow: hidden;
  

/* ↓↓↓ the main CSS */


position: relative;
background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
z-index: 1;
}


.background:before {
/* ↓↓↓ the main CSS */


content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.5);
z-index: -1;
}


.text {
/* ↓↓↓ the decorative CSS */


font-size: 20px;
color: #072252;
}
<div class="background">
<span class="text">Some child</span>
<span class="text"></span>
</div>

小开 
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
小开

来自我在如何添加一个颜色覆盖的背景图像?的答案，标记为该问题哪里不需要伪元素，也不需要额外的元素的副本。

这个复制，就在这里，几年后，仍然下落不明的background-blend-mode属性，现在广泛实现了(它位于多个背景和插入阴影示例的下面)。

所以这是我的答案，答案给了你3个简单的方法，没有额外的标记或伪:

一开始，我当时看到了两个简单的选项(2016年，这两个选项也在答案中，所以没有什么新东西可以补充的，…注意第三个如果你已经阅读了关于bg和box-shadow的其他答案):

  • 多重背景与半透明的单一渐变图像从一个老codepen的我很少的例子。

  • 巨大的嵌入阴影，它的作用与渐变叠加相同

这里给出的例子:

梯度选择:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS渐变由<gradient>数据类型表示，这是<image>的一种特殊类型，由两种或多种颜色之间的渐进过渡组成。你可以在三种类型的梯度中选择:线性(用linear-gradient()函数创建)、径向(用radial-gradient()函数创建)和圆锥曲线(用conic-gradient()函数创建)。你也可以使用repeating-linear-gradient()、repeating-radial-gradient()和repeating-conic-gradient()函数创建重复渐变。

渐变可以在任何使用<image>的地方使用，比如背景。因为渐变是动态生成的，它们可以取代传统上用于实现类似效果的光栅图像文件。此外，由于渐变是由浏览器生成的，当放大时，它们看起来比光栅图像更好，并且可以动态地调整大小。

    html {
min-height:100%;
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/100/2500/1656);
background-size:cover;
}

阴影选项:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow CSS属性在元素的框架周围添加阴影效果。您可以设置多个效果，以逗号分隔。盒子阴影由相对于元素的X和Y偏移量、模糊和扩展半径以及颜色来描述。

插图

如果没有指定(默认)，则假定阴影是投影阴影(就好像盒子被提升到内容之上一样)。inset关键字的出现将阴影更改为框架内的阴影(就像内容在框内被压抑一样)。嵌入阴影是在边框内绘制的(甚至是透明的)，在背景之上，但在内容之下。

html {
min-height: 100%;
background: url(https://picsum.photos/id/100/2500/1656);
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

我的一个老codepen，很少有例子

现在，第三个选项不见了:

background-blend-mode CSS属性设置元素的背景图像如何相互融合以及如何与元素的背景颜色融合。

html {
min-height: 100%;
background: url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3);
background-size: cover;
background-blend-mode: multiply;
}

当然，也有其他有价值的方法来做到这一点，这取决于你的项目，使用的CSS库和你已经拥有的少数选项。重要的是找到最适合你的需求的选项，你理解/掌握的方法，浏览器的规格，如果你有信心或已经有一个javascript或服务器端函数已经可以/完成这项工作，那么就使用它。轮子就是轮子。

小开

在约翰内斯·克劳斯的回答中，你甚至可以省略内部元素，只使用“before”。(或"after")伪元素代替。(它只是一个覆盖…)


提交答案