如何在背景图像上添加叠加不透明度？ [复制]答案

【问题标题】：How to add overlay opacity over a background image? [duplicate]如何在背景图像上添加叠加不透明度？ [复制]
【发布时间】：2018-09-01 17:47:24
【问题描述】：

我想要实现的目标听起来很简单，但我无法让它发挥作用。

我正在尝试在image 顶部添加opacity，以便< h1 > 标记更易于阅读。

这是我的 HTML：

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url('path-to-image');" >
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>
</header>

这是 CSS：

/*Custom CSS */
.img_content {
  /* background: url(); */
  background-repeat: no-repeat;
  background-size: cover;
}
header section{
  padding:0;
}

@media screen and (max-width: 768px){
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.bg_img {
  background: #221f1f73;
}
.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}
.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

我认为问题可能是-Z index 或类似的东西？

【问题讨论】：

你想在h1还是bg_img上设置不透明度？
bg_img 请！
你能检查一下，看看你是否可以解决类似的问题：stackoverflow.com/questions/49333122/css-border-confusion/…

标签： html css

【解决方案1】：

您不能在背景图像上设置不透明度，因为它将被 bg_img div 中的元素继承（因此 h1 将继承相同的不透明度）

您需要做的是使用 rgba 设置不透明度

.bg_img {
    // this css rule is setting the opacity if image to 0.5
    background-color: rgba(34,31,31, 0.5); 
}

【讨论】：

【解决方案2】：

你可以这样做：

.bg_img {
  background: #221f1f73;
  opacity: 0.7;
}

Jsfiddle

【讨论】：

这样，h1会继承同样的不透明度...

【解决方案3】：

尝试使用“背景混合模式”属性..

【讨论】：

【解决方案4】：

试试这个

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url('https://i.stack.imgur.com/GsDIl.jpg');">

        <div class="container">
          <h1 style="position:relative;z-index: 100;" class="content_h1">Most Popular Lunches: Week 11</h1>

        </div>
        <div class="overlay" style="position:absolute;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5)"></div>
      </div>
    </div>
  </section>
</header>

CSS

.img_content {
  /* background: url(); */
  background-repeat: no-repeat;
  background-size: cover;

}
header section{
    padding:0;
}

@media screen and (max-width: 768px){
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.bg_img {
  background: #221f1f73;
  position:relative;
}
.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}
.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

为了方便，我使用了内联 css，虽然不推荐

【讨论】：

【解决方案5】：

试试这个。

.page-heading {
    background: url(../images/sample/image.jpg) no-repeat fixed 50% 0px / cover;
    opacity: 0.9;
    box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
    position: relative;
    text-align: center;
    padding: 75px 0px;
    width:100%;
}

【讨论】：

【解决方案6】：

保持您的 HTML 与发布的相同。然后按照下面的操作：首先，您需要设置类 '.bg_img'，如下所示：

.bg_img {
  background: #f5f5f5;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

然后使用 '::before' 伪类添加背景覆盖

.bg_img::before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    background-color: rgba(0,0,0,.55);
}

最后将 'position: relative' 添加到 '.content_h1' 类中，如下所示：

.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
  position: relative;
}

【讨论】：

【解决方案7】：

你可以试试这个方法

h1 {
	font-size: 50px;
	color:#fff;
	position: relative;
    z-index: 10;
}
.bg_img {
	position: relative;
	background:url(https://preview.ibb.co/k2cREc/banner_about.jpg) no-repeat;
	background-size:cover;
	height: 400px;
	background-color:  rgba(0, 0, 0, 0.3);
	display: flex;
    justify-content: center;
    align-items: center;
}
.bg_img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

<section>
    <div class="img_content">
      <div class="bg_img">
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>

【讨论】：

【解决方案8】：

有两种方便的方法来完成此操作，一种通过background-image 设置多个背景，另一种通过background-blend-mode 设置。

选项 1。

background-image: linear-gradient(rgba(0,0,0,.5)), url(path-to-image);

对于此选项，您通过利用 background-image 的线性渐变选项设置一个半透明的黑色背景，具有单个值（尽管您可以使用多个值来获得一些视觉兴趣），然后添加图像作为其后面的第二个背景。根据需要调整值。

选项 2。

background-blend-mode: multiply;
background-color: #666666;

对于此选项，您不想使用黑色，因为您根本看不到图像。您在视觉上实现了几乎相同的效果，但是以更易于阅读的不同方式进行。同样，根据需要调整颜色。

最后一点：.bg_img 类的背景颜色无效。十六进制颜色应该只有 6 个字符，其中前 2 个为红色，接下来的两个为绿色，最后两个为蓝色。数字范围从 00（十六进制表示 0）到 ff（十六进制表示 255）。每两个字符组合指定混合多少红色、绿色或蓝色光以创建最终颜色值。（当使用三个字符时，每个字符都加倍，例如，#0fc 将等同于 #00ffcc）。十六进制值应始终包含 3 或 6 个字符。

【讨论】：

我喜欢选项 1，但线性渐变需要 2 个参数，所以我修复了它重复第一个参数，例如： background-image: linear-gradient(rgba(0,0,0,.5) ,rgba(0,0,0,.5)), url(图像路径);

【解决方案9】：

尝试在这里使用:before 伪元素和position: absolute 来覆盖图像

.bg_img {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.bg_img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #221f1f73;
  z-index: -1;
}

header section {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}

.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url(http://lorempixel.com/400/200/sports);">
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>
</header>

【讨论】：