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

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中将鼠标悬停在颜色上，然后单击颜色为十六进制颜色，您可以轻松更改颜色的不透明度，而不是rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902))，它可以简称为 (#3204fde6, #9907fae6)

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

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

这是一个创意想法，使用box-shadow：

#header {
    background-image: url("https://images.unsplash.com/photo-1569442130407-8d2d49e741db?w=500");
    box-shadow: inset 0 0 0 99999px rgba(0, 120, 255, 0.5);
    width: 500px;
    height: 375px;
}

<div id="header"></div>

发生了什么：

1. 设置background-image元素的背景（以及其他背景属性）。

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

Answer 4

您可以hue-rotate在filter属性中使用该函数。不过，这是一个相当模糊的测量，您需要知道需要移动色轮多少度才能达到所需的色调，例如：

header {
    filter: hue-rotate(90deg);
}

找到正确的色调后，您可以组合brightness和 或grayscale或saturate函数来找到正确的色调，例如：

header {
    filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

该filter属性在 Webkit 中具有供应商前缀，因此最终代码将是：

header {
  -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
          filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

Answer 5

要添加叠加层，您可以使用 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;
}

Answer 6

#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 7

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

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

该解决方案要求您知道被覆盖对象的确切大小。