带有渐变叠加的视差图像

Question

我正在设计一个号召性用语区域，该区域有一个带有以下 html 的背景图像：

<section id="callout" class="jumbotron" style="background-image: url('images/image-1.jpg');">
  <div class="container">
    <h1 class="display-3">Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  </div>
</section>

使用以下css：

.jumbotron {
    background: linear-gradient(rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.3));
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 0;
    padding: 2rem 1rem;
    margin-bottom: 0;
  }

我正在尝试在不起作用的图像上添加渐变叠加。我知道在 css 中我可以添加一行背景图片 url 和线性渐变，如下所示：

.jumbotron {
  background: linear-gradient(rgba(20,20,20, .3), rgba(20,20,20, .3)), url("../images/image-1.jpg") no-repeat center center fixed;
    //background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 0;
    padding: 2rem 1rem;
    margin-bottom: 0;
  }

但是，我想保持通过 html 加载背景图像（稍后通过 CMS 更改）而不是 css，但如果可能的话，从 style.css 更改线性渐变。

我曾尝试使用 .jumbotron:after {} 并以这种方式添加渐变，但它不起作用。

Answer 1

渐变被认为是背景图像。您在 .jumbotron 上设置它，然后通过内联样式用 jpg 覆盖它。

要实现您想要的效果，请将.jumbotron 设置为position: relative;，将.jumbotron > .container 设置为position: relative; z-index: 2，并使用以下（简化的）CSS 向.jumbotron 添加一个额外的直接子代：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.3));