CSS 背景图像上的半透明颜色层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9182978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semi-transparent color layer over background-image?
提问by Marc
I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color "layer" over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image?
我有一个 DIV，我想把一个图案作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面放一个浅色透明的“层”。以下是我尝试过但不起作用的方法。有没有办法将彩色图层放在背景图像上？
Here's my CSS:
这是我的 CSS：
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
回答by BevansDesign
I know this is a really old thread, but it shows up at the top in Google, so here's another option.
我知道这是一个非常古老的线程，但它显示在 Google 的顶部，所以这是另一种选择。
This one is pure CSS, and doesn't require any extra HTML.
这是纯 CSS，不需要任何额外的 HTML。
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
There are a surprising number of uses for the box-shadow feature.
box-shadow 功能有惊人的用途。
回答by Johannes Klau?
Here it is:
这里是：
.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 for this:
用于此的 HTML：
<div class="background">
<div class="layer">
</div>
</div>
Of course you need to define a width and height to the .backgroundclass, if there are no other elements inside of it
当然你需要为类定义宽度和高度.background，如果里面没有其他元素
回答by Tom
From CSS-Tricks... there is a one step way to do this without z-indexing and adding pseudo elements-- requires linear gradient which I think means you need CSS3 support
从 CSS-Tricks ... 有一种一步方法可以做到这一点，无需 z-indexing 和添加伪元素——需要线性渐变，我认为这意味着你需要 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);
}
回答by TorranceScott
You can also use a linear gradient and an image: http://codepen.io/anon/pen/RPweox
您还可以使用线性渐变和图像：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');
}
This is because the linear gradient function creates an Image which is added to the background stack. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
这是因为线性渐变函数创建了一个添加到背景堆栈中的图像。https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
回答by Sven Bieder
You need then a wrapping element with the bg image and in it the content element with the bg color:
然后，您需要一个带有 bg 图像的包装元素，其中包含带有 bg 颜色的内容元素：
<div id="Wrapper">
<div id="Content">
<!-- content here -->
</div>
</div>
and the css:
和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%;
}
回答by yaufaniadam
Try this. Works for me.
尝试这个。为我工作。
.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;
}
回答by d4ncer
I've used this as a way to both apply colour tints as well as gradients to images to make dynamic overlaying text easier to style for legibility when you can't control image colour profiles. You don't have to worry about z-index.
我已经使用它作为一种方法来对图像应用颜色色调和渐变，以便在您无法控制图像颜色配置文件时使动态叠加文本更容易设置样式以提高可读性。您不必担心 z-index。
HTML
HTML
<div class="background-image"></div>
SASS
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
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);
}
Hope it helps
希望能帮助到你
回答by Kevin C.
See my answer at https://stackoverflow.com/a/18471979/193494for a comprehensive overview of possible solutions:
有关可能的解决方案的全面概述，请参阅我在https://stackoverflow.com/a/18471979/193494上的回答：
- using multiple backgrounds with a linear gradient,
- multiple backgrounds with a generated PNG, or
- styling an :after pseudoelement to act as a secondary background layer.
- 使用具有线性渐变的多个背景，
- 具有生成的 PNG 的多个背景，或
- 样式化一个 :after 伪元素作为辅助背景层。
回答by Hexodus
Why so complicated? Your solution was almost right except it's a way easier to make the pattern transparent and the background color solid. PNG can contain transparencies. So use photoshop to make the pattern transparent by setting the layer to 70% and resaving your image. Then you only need one selector. Works cross browser.
为什么这么复杂？您的解决方案几乎是正确的，只是它更容易使图案透明且背景颜色为纯色。PNG 可以包含透明胶片。因此，使用 photoshop 通过将图层设置为 70% 并重新保存图像来使图案透明。那么你只需要一个选择器。跨浏览器工作。
CSS:
CSS：
.background {
background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
background-color: rgb(248, 247, 216);
}
HTML:
HTML：
<div class="background">
...
</div>
This are the basic. A usage example follows where I switched from backgroundto background-imagebut both properties works the same.
这是基本的。下面是我从backgroundto切换到的用法示例，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> PLEASE WAIT A MINUTE! IT TAKES SOME TIME TO LOAD THE EXTERNAL PATTERNS.
请等一分钟！加载外部模式需要一些时间。
This website seems to be rather slow...
这个网站好像有点慢...
回答by Fanky
You can use a semitransparent pixel, which you can generate for example here, even in base64 Here is an example with white 50%:
您可以使用半透明像素，例如可以在此处生成，即使在 base64 中也是如此，这是一个白色 50% 的示例：
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
without uploading
without extra html
i guess the loading should be quicker than box-shadow or linear gradient
无需上传
没有额外的 html
我想加载应该比 box-shadow 或线性渐变更快
