Question

目的

我想要在此标题元素上叠加颜色。我怎么能用CSS做到这一点？

代码

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

Answer 1

你应该使用rgba将你的元素与photosie重叠.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;
}

Answer 2

您可以在 CSS 的一行中完成此操作。

  background: linear-gradient(to right, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;

也将鼠标悬停在 VS Code 中的颜色上，然后单击该颜色为十六进制颜色，即可轻松更改颜色的不透明度，而不必使用{ {1}}，可能短到 rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902))

(#3204fde6, #9907fae6)

header{
   height: 100vh;
   color: white;
   font: bold 2em/2em monospace;
   display: flex;
   justify-content: center;
   align-items: center;
  
  background: linear-gradient(to right,#3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
}

在此处查看CodePen

Answer 3

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

像这样的东西。只需将overlay类添加到标题中即可。

Answer 4

您可以使用超厚负半透明边框...

.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"/>

此解决方案要求您了解所覆盖对象的确切大小。

Answer 5

在元素上使用mutple backgorund，并使用线性渐变作为颜色叠加，将开始和结束颜色停止声明为相同的值。

请注意，多背景声明中的图层读取方式与从上到下读取的方式非常相似，因此首先放置叠加层，然后放置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
}

Answer 6

您还可以使用此类设置添加其他班级。叠加层不会重叠内容，也不需要其他标签

.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

Answer 7

如果您不介意使用绝对定位，则可以定位背景图像，然后使用不透明度添加叠加层。

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

见这里：http://jsfiddle.net/4yh9L/

Answer 8

在帮助中，他们使用班级home-page作为

HTML

<div class="page home-page">...</div>

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

你可以尝试类似这样的

Answer 9

您可以在filter(x => x['duration']);属性中使用hue-rotate函数。但是，这是一个相当晦涩的测量，您需要知道为了达到所需的色相需要移动色轮大约几度，例如：

filter

找到正确的色调后，可以结合使用header { filter: hue-rotate(90deg); }和brightness或grayscale函数来找到正确的阴影，例如：

saturate

您需要添加正确的供应商前缀，才能跨浏览器使用。我建议使用Autoprefixer从Sass进行编译以自动执行此操作。

Answer 10

如果您只想添加一个类来添加叠加层：

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>

重要提示：您将overlayed类放在需要上以设置position的元素。如果不是，则::before元素将采用其他父元素的大小。在我的示例中，我已经通过.overlayed规则将位置设置为“相对”，但是在您的用例中，您可能需要“绝对”或其他一些值。

此外，请确保z-index类的overlayed高于容器的最终子元素，除非您实际上希望这些元素“脱颖而出”而不是覆盖（与我的代码段中的stand-out类的跨度一样）。

Answer 11

这是一个使用box-shadow的创意：

#header {
    background-image: url("apple.jpg");
    box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}

发生了什么

background设置元素的背景。
box-shadow是重要的位。基本上，它在元素的内部，背景的顶部设置了一个非常大的阴影，即半透明的

如何在CSS中叠加带颜色的图像？

目的

代码

HTML

CSS

11 个答案:

HTML

CSS

发生了什么