Html 如何在CSS中用颜色叠加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18815157/
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
How to overlay image with color in CSS?
提问by LittleLebowski
Objective
客观的
I want a color overlay on this header element. How can I do this with CSS?
我想在这个标题元素上叠加一个颜色。我怎样才能用 CSS 做到这一点？
Code
代码
HTML
HTML
<header id="header">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</header>
CSS
CSS
#header {
background: url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
回答by Ramin
You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .rowas an overlayer like this:
你应该使用 rgba 用照片覆盖你的元素。rgba 是一种在 CSS 中声明颜色的方法，包括 alpha 透明度支持。您可以.row像这样用作覆盖层：
#header {
background: url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
.row{
background: rgba(39,62,84,0.82);
overflow: hidden;
height: 100%;
z-index: 2;
}
回答by elixon
You may use negative superthick semi-transparent border...
您可以使用负超厚半透明边框...
.red {
outline: 100px solid rgba(255, 0, 0, 0.5) !important;
outline-offset: -100px;
overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>This solution requires you to know exact sizes of covered object.
此解决方案要求您知道被覆盖物体的确切尺寸。
回答by Lewis Donovan
You could use the hue-rotatefunction in the filterproperty. It's quite an obscure measurement though, you'd need to know how many degrees round the colour wheel you need to move in order to arrive at your desired hue, for example:
您可以hue-rotate在filter属性中使用该函数。不过，这是一个相当模糊的测量，您需要知道需要移动色轮多少度才能达到所需的色调，例如：
header {
filter: hue-rotate(90deg);
}
Once you'd found the correct hue, you could combine the brightnessand either grayscaleor saturatefunctions to find the correct shade, for example:
找到正确的色调后，您可以组合brightness和 或grayscale或saturate函数来找到正确的色调，例如：
header {
filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}
The filterproperty has a vendor prefix in Webkit, so the final code would be:
该filter属性在 Webkit 中具有供应商前缀，因此最终代码将是：
header {
-webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}
回答by DevlshOne
#header.overlay {
background-color: SlateGray;
position:relative;
width: 100%;
height: 100%;
opacity: 0.20;
-moz-opacity: 20%;
-webkit-opacity: 20%;
z-index: 2;
}
Something like this. Just add the overlayclass to the header, obviously.
像这样的东西。overlay显然，只需将类添加到标题中即可。
回答by mindfullsilence
Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.
在元素上使用多个背景，并通过将开始和结束颜色停止声明为相同的值来使用线性渐变作为颜色叠加。
Note that layers in a multi-background declaration are read much like they are rendered, top-to-bottom, so put your overlay first, then your bg image:
请注意，多背景声明中的图层的读取方式与它们的渲染非常相似，从上到下，因此首先放置您的叠加层，然后放置您的 bg 图像：
#header {
background:
linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
回答by Moghazi
You can do that in one line of CSS.
你可以在一行 CSS 中做到这一点。
background: linear-gradient(rgba(50, 4, 253, 0.9), rgba(153, 7, 250, 0.9)), url(https://picsum.photos/1280/853/?random=1) no-repeat top center
HTML
HTML
<header>
It is simply dummy text of the printing and typesetting industry.
</header>
CSS
CSS
<style>
header {
color: white;
font-size: 50px;
height: 100vh;
background: linear-gradient(rgba(50, 4, 253, 0.9), rgba(153, 7, 250, 0.9)), url(https://picsum.photos/1280/853/?random=1) no-repeat top center
}
</style>
See here CodePen
看这里CodePen
回答by nonzaprej
If you want to just add a class to add the overlay:
如果您只想添加一个类来添加叠加层：
span {
padding: 5px;
}
.green {
background-color: green;
color: #FFF;
}
.overlayed {
position: relative;
}
.overlayed::before {
content: ' ';
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #00000080;
}
.stand-out {
position: relative;
z-index: 2;
}<span class="green overlayed">with overlay</span>
<span class="green">without overlay</span>
<br>
<br>
<span class="green overlayed">
<span class="stand-out">I stand out</span>
</span>Important: the element you put the overlayedclass on needsto have a positionset. If it doesn't, the ::beforeelement will take the size of some other parent element. In my example I've set the position to "relative" via the .overlayedrule, but in your use case you might need "absolute" or some other value.
重要提示：您放置overlayed类的元素需要有一个position集合。如果不是，则该::before元素将采用其他某个父元素的大小。在我的示例中，我通过.overlayed规则将位置设置为“相对” ，但在您的用例中，您可能需要“绝对”或其他一些值。
Also, make sure that the z-indexof the overlayedclass is higher than the ones of the eventual child elements of the container, unless you actually want for those to "stand out" and not be overlayed (as with the span with the stand-outclass, in my snippet).
此外，请确保z-index该的overlayed类比容器的最终子元素的个高，除非你真的想为那些以“鹤立鸡群”，而不是被覆盖（与同跨度stand-out类，在我的代码段）。
回答by Zeroox
You can also add an additional class with such settings. Overlay will not overlap content and no additional tag is needed
您还可以使用此类设置添加其他类。叠加不会重叠内容，不需要额外的标签
.overlay {
position: relative;
z-index: 0;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: .6;
/* !!! */
z-index: -1;
}
回答by Conqueror
If you don't mind using absolute positioning, you can position your background image, and then add an overlay using opacity.
如果您不介意使用绝对定位，您可以定位背景图像，然后使用不透明度添加叠加层。
div {
width:50px;
height:50px;
background: url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
position:absolute;
left:0;
top:0;
}
.overlay {
background:red;
opacity:.5;
}
See here: http://jsfiddle.net/4yh9L/
回答by Thillai Narayanan
In helpshift, they used the class home-pageas
在 helpshift 中，他们使用该类home-page作为
HTML
HTML
<div class="page home-page">...</div>
CSS
CSS
.home-page {
background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
background: rgba(39,62,84,0.82);
overflow: hidden;
height: 100%;
z-index: 2;
}
you can try similar like this
你可以像这样尝试类似的
