如何在CSS中用颜色覆盖图像？

Question

客观的

我想在此标头元素上叠加颜色。我怎样才能用 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>

原文由 LittleLebowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用 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;
}

原文由 Ramin Omrani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在一行 CSS 中做到这一点。

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

您还可以修改颜色的不透明度，方法是在 VS Code 中将鼠标悬停在颜色上并单击它以使其成为十六进制颜色。它可以缩短为 (#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>

看这里 CodePen

原文由 Ahmad Moghazi 发布，翻译遵循 CC BY-SA 4.0 许可协议