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中我可以添加一行背景图像网址和线性渐变，如下所示：

.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：在{}之后添加渐变但不起作用。

Answer 1

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

要完成您要尝试的效果，请将.jumbotron设置为position: relative;，将.jumbotron > .container设置为position: relative; z-index: 2，然后将额外的直接子项添加到.jumbotron以下（简化）CSS：

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

具有梯度叠加的视差图像

1 个答案: