[英]How to overlay image with color in CSS?
I want a color overlay on this header element.我想在这个标题元素上叠加一个颜色。 How can I do this with CSS?我怎样才能用 CSS 做到这一点?
#header { /* Original url */ /*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/ background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF }
<header id="header"> <div class="row"> <div class="col-xs-12"> ... </div> </div> </header>
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.你应该使用 rgba 来用照片覆盖你的元素。rgba 是一种在 CSS 中声明颜色的方法,包括 alpha 透明度支持。 you can use .row
as an overlayer like this:您可以像这样使用.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;
}
You can do that in one line of CSS .您可以在一行CSS中做到这一点。
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
You can also modify the opacity of a color by hovering over it in VS Code and clicking on it to make it a hex color.您还可以通过在 VS Code 中将鼠标悬停在颜色上并单击它以使其成为十六进制颜色来修改颜色的不透明度。 It can be shortened to (#3204fde6, #9907fae6)
instead of the rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902)
.它可以缩短为(#3204fde6, #9907fae6)
而不是rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902)
。
header { height: 100vh; width: 100%; color: white; font: bold 6.5em/2em monospace; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center; }
<header>Hello World</header>
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.此解决方案要求您知道被覆盖物体的确切尺寸。
You could use the hue-rotate
function in the filter
property.您可以在filter
属性中使用hue-rotate
函数。 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:虽然这是一个非常模糊的测量,但您需要知道您需要围绕色轮移动多少度才能达到您想要的色调,例如:
header {
filter: hue-rotate(90deg);
}
Once you'd found the correct hue, you could combine the brightness
and either grayscale
or saturate
functions to find the correct shade, for example:找到正确的色调后,您可以结合brightness
和grayscale
或saturate
度函数来找到正确的色调,例如:
header {
filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}
The filter
property 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%);
}
Here's a creative idea using box-shadow
:这是一个使用box-shadow
的创意:
#header {
background-image: url("apple.jpg");
box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}
The background
sets the background for your element. background
设置元素的背景。
The box-shadow
is the important bit. box-shadow
是重要的一点。 It basically sets a really big shadow on the inside of the element, on top of the background, that is semi-transparent它基本上在元素内部设置了一个非常大的阴影,在背景之上,即半透明
#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 overlay
class to the header, obviously.显然,只需将overlay
类添加到标题中即可。
To add an overlay, you can use the CSS background-blend-mode property something like this:要添加叠加层,您可以使用 CSS background-blend-mode 属性,如下所示:
#header {
background: url("img/image.jpg") 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
background-color: hsl(206, 27%, 38%);
background-blend-mode: multiply;
}
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.在元素上使用 mutple backgorund,并通过将开始和结束颜色停止声明为相同的值来使用线性渐变作为颜色叠加层。
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:请注意,多背景声明中的图层的读取方式与从上到下的渲染方式非常相似,因此请先放置叠加层,然后再放置背景图像:
#header {
background:
linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)),
url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
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;
}
https://codepen.io/zeroox003/pen/yLYbpOB https://codepen.io/zeroox003/pen/yLYbpOB
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/见这里:http: //jsfiddle.net/4yh9L/
In helpshift, they used the class home-page
as在 helpshift 中,他们使用班级home-page
作为
<div class="page home-page">...</div>
.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你可以尝试类似这样
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 overlayed
class on needs to have a position
set.重要提示:您放置overlayed
类的元素需要设置position
。 If it doesn't, the ::before
element will take the size of some other parent element.如果不是, ::before
元素将采用其他父元素的大小。 In my example I've set the position to "relative" via the .overlayed
rule, but in your use case you might need "absolute" or some other value.在我的示例中,我通过.overlayed
规则将位置设置为“相对”,但在您的用例中,您可能需要“绝对”或其他一些值。
Also, make sure that the z-index
of the overlayed
class 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-out
class, in my snippet).此外,请确保overlayed
类的z-index
高于容器的最终子元素的 z-index,除非您确实希望那些“突出”而不被覆盖(与带有stand-out
的 span 一样) stand-out
类,在我的片段中)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.