繁体   English   中英

向背景图像添加深色叠加层

[英]Add a dark overlay to background image

我看过几个关于这个的 SO 帖子:我想通过添加叠加层来使当前背景图像变暗。

 #header1 { background: url("http://lorempixel.com/image_output/cats-qc-640-480-10.jpg"); background-position:center center; position: relative; background-size: cover; padding-bottom:5em; }.overlay { background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; position: relative; z-index: 1; }
 <div class="header"> <div class="overlay"> <div class="jumbotron" id="header1"> <h1>Hello</h1> </div> </div> </div>

也许我不明白如何使用 z-index,或者我在这里遗漏了一些东西。 用于着色的深色背景未显示。 任何指针?

使用线性渐变

要使背景变暗,请参阅此代码笔和此链接

<div class="bg-img"></div>

.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
        opacity: .6; 
  }
}

 #header1 { background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/ background-size: cover; } h1 { color: white; background-color: rgba(0, 0, 0, 0.7); padding-top: 10px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; }
 <div class="header"> <div class="overlay"> <div class="jumbotron" id="header1"> <h1>Hello</h1> </div> </div> </div>

正如预期的那样,h1 作为一个额外的可视层,它的填充覆盖了#header1。

第二种解决方案是将原始背景图像添加到 .header 并将 h1 中的样式赋予 #overlay 并进行一些调整,这也应该可以解决问题。

还有另一种可能的解决方案(类似于第二个),您可以将背景图像添加到叠加层,并使用我给#header1 或 .jumbotron 的示例中的 h1 样式

除了第一个解决方案之外,您应该能够通过添加背景颜色来添加额外的图层:叠加。 我不确定它会如何影响背景,但我猜它应该只是添加一层额外的颜色。

这是我使用此技术的个人示例。

例子

z-index 属性指定元素的堆栈顺序。 具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。 对于您的答案,您可以访问css-tricks

我猜你想完全隐藏背景图像,那么你需要在 rgba(0,0,0,1) 中将 alpha 的值设置为 1

0.7 定义了您需要显示特定元素的透明度级别。

下面的链接用很好的例子解释了覆盖的概念

http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}

如果添加框阴影,则不需要覆盖。 内部框阴影用作叠加层。 您可以通过向上或向下更改 0.5 来调整不透明度。

您也可以使用这个 CSS:

filter: brightness(50%);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM