Question

为了清楚起见，我不是在一个HTML元素中询问stacking background images。

相反，我有一个网站，在最外面的div上有一个背景图片，作为网站设计的一个组成部分。该网站的开发是为了填充浏览器的窗口而不需要滚动。

但是，在某些文本内容较长的页面上，有一些较小的固定高度窗口允许滚动。

我试图实现fade-out bottom CSS trick，以便文本在滚动到视图时显得突出显示。这需要另一张背景图片。

淡出底部效果所需的渐变背景图像会干扰网站正文的背景图像。正如您在fiddle中看到的那样，它创造了“删除”的效果。背景图片的一部分。

z-index属性似乎没有在这里做任何事情，我似乎无法找到一种方法来调整这些不同背景图像的堆叠。理想情况下，我喜欢主背景图像来覆盖渐变背景图像。

＆＃13;

.main-content {
  position: relative;
  width: 100%;
  height: 800px;
  background: #fff url(https://s-media-cache-ak0.pinimg.com/originals/1c/86/08/1c86080e8526b769bda7446582f72f76.png) no-repeat;
  background-size: cover;
  z-index: 1;
}

.text-section {
  position: relative;
  width: 50%;
  margin: 0 auto;
  height: 400px;
  color: #0077c0;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid green;
}

.text-section p {
  position: absolute;
  bottom: 0;
}

.gradient {
  width: 100%;
  background: url(https://css-tricks.com/examples/FadeOutBottom/bottom-fade.png);
  height: 200px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

＆＃13;

<div class="main-content">
  <div class="text-section">
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    </p>
    <div class="gradient"></div>
  </div>
</div>

＆＃13;

Answer 1

我的问题的解决方案有点棘手，但我最终用纯CSS完成了我所需的特定情况。首先，我给了我的主要内容包装器一个带有透明覆盖.png的伪元素（除了刻字）：

关键是pointer-events css属性。这允许用户点击叠加层而不与其交互。此属性得到广泛支持（即使在IE11中;但不是IE10或更低版本）。

然后，您只需要确保主内容包装器的z-index属性和所有子项设置为＆＃39; auto＆＃39;，除非您确实需要特定元素来覆盖渐变，在这种情况下，您将为该元素赋予正值。

虽然这个解决方案看起来有点不稳定，但它在我的实际设计中表现得非常好（字体不是完全不透明的，因此它似乎淡入背景而不会被模糊渐变切断。有，当然，字母也少了。

我希望这有助于任何有类似问题的人。

＆＃13;

.main-content:after {

    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: -270px;
    right: 0;
    pointer-events: none;
    background-size: 100% 800px;
    overflow: hidden;
    background: url(https://s-media-cache-ak0.pinimg.com/originals/1c/86/08/1c86080e8526b769bda7446582f72f76.png) no-repeat bottom left;
}

.text-section {
  position: relative;
  width: 50%;
  margin: 0 auto;
  height: 400px;
  color: #0077c0;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid green;
}

.text-section p {
  position: absolute;
  bottom: 0;
}

.gradient {
  width: 100%;
  background: url(https://css-tricks.com/examples/FadeOutBottom/bottom-fade.png);
  height: 200px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="main-content">
  <div class="text-section">
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    </p>
    <div class="gradient"></div>
  </div>
</div>

＆＃13;

如何调整来自不同HTML元素的背景图像的堆叠顺序/ z-index

1 个答案: