CSS3 2x URL 的背景和一个不透明的

Question

我有这条线：

   background: url("../img/background-first-layer.png") no-repeat, url("../img/background-second-layer.png") no-repeat;

我需要添加 "opacity:0.15" 但仅针对第二层 - 第一层未更改，也许有人知道怎么写？（我想写成一个class）

编辑这里有示例代码：

<body>
<div class="container">
        <header class="header-block" alt="code which dont want opacity">
            <a class="brand"><img src="/img/brand.png" alt="code which dont want opacity"></a>
            <a class="logo"><img src="img/logo.png" alt="code which dont want opacity"></a>
        </header>
        <div class="left-area" alt="code which dont want opacity">
        <p>code which dont want opacity</p>
            <section class="register-box" alt="code which dont want opacity">
              <p>code which dont want opacity</p>
              </section>
              
            
        
              
              </div>
              </body>

body {
    color: #fff;
    background: url("../img/background-first-layer.png") no-repeat;
    background-size: cover;
}

.container {
     background: url("../img/background-second-layer.png") no-repeat;
     background-size: cover;
    max-width: 2560px;
    width: 100%;
    height: auto;

}

.left-area {
    padding: 55px 0 0;
    text-align: center;

}

.brand {
    padding-right: 24px;
    width: 100%;
    max-width: 112px;
    opacity: 0.42;
}

Answer 1

这是一个使用伪元素的例子。伪元素 (::before) 绝对放置在原始容器内，背景图像 z-index 设置为 -1，不透明度设置为 0.42。这样你的内容就不会受到不透明度的影响，并且在它上面，所以用户可以与之交互。

现在您也可以在原始 div 中使用另一个 div 来实现此目的（只需放置一个空的 div/span 并赋予它与伪元素相同的样式减去content: " ") 但我不确定您是否可以编辑 html

我添加了背景颜色，这样你就可以清楚地看到发生了什么

body {
  color: #fff;
  background: green url("../img/background-first-layer.png") no-repeat;
  background-size: cover;
}

.container {
  max-width: 2560px;
  width: 100%;
  height: auto;
  position: relative;
}
.container::before {
  background: gray url("../img/background-second-layer.png") no-repeat;
  background-size: cover;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.42;
  z-index: -1;
}

.left-area {
  padding: 55px 0 0;
  text-align: center;
}

.brand {
  padding-right: 24px;
  width: 100%;
  max-width: 112px;
}

<div class="container">
  <header class="header-block" alt="code which dont want opacity">
    <a class="brand"><img src="/img/brand.png" alt="code which dont want opacity"></a>
    <a class="logo"><img src="img/logo.png" alt="code which dont want opacity"></a>
  </header>
  <div class="left-area" alt="code which dont want opacity">
    <p>code which dont want opacity</p>
    <section class="register-box" alt="code which dont want opacity">
      <p>code which dont want opacity</p>
    </section>
  </div>

CSS3 2x URL 的背景和一个不透明的

CSS3 2x URL's background and one with opacity

css

opacity

编辑这里有示例代码：

CSS3 2x URL 的背景和一个不透明的

CSS3 2x URL's background and one with opacity

css

opacity

编辑 这里有示例代码：

编辑这里有示例代码：