Question

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

我尝试在opacity之上添加image，以便< 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或类似的问题？

Answer 1

有两种方便的方法可以实现这一目标，一种是通过background-image设置多个背景，另一种是通过background-blend-mode设置。

选项1。

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

对于此选项，您可以利用背景图像的线性渐变选项设置半透明黑色背景，并使用单个值（尽管您可以使用多个值来表示某些视觉兴趣），然后将图像添加为其背后的第二个背景。根据需要调整值。

选项2。

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

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

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

Answer 2

您无法在背景图像上设置不透明度，因为它将由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); 
}

Answer 3

你可以这样做：

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

Jsfiddle

Answer 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来提高容易度，但不推荐使用

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

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

Answer 7

你可以试试这个方法

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

{{1}}

Answer 8

尝试在this.httpClient.get('hidden').subscribe((myData:any)=>{ alert(myData.utLogon_responce.sessionId) })处使用: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;
}

Answer 9

尝试使用'background-blend-mode'属性..

如何在背景图像上添加叠加不透明度？

9 个答案: