如何让文字等元素出现在堆叠的背景之上？答案

【问题标题】：How to make elements such as text appear on top of stacked backgrounds?如何让文字等元素出现在堆叠的背景之上？
【发布时间】：2015-03-19 13:55:53
【问题描述】：

我有一个网站，其主体包含固定背景图像和一个包含透明径向渐变层的 div 类。如何使类中的元素不透明并出现在背景渐变和背景图像之上？

CSS：

$body-color1: #f2009f;
$body-color2: #218bdb;

// Solution 1. However, unable too get content on top of gradient and backgourn image
html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */
body {

  background: $body-color2;
  background: url('http://i.huffpost.com/gen/964776/thumbs/o-CATS-KILL-BILLIONS-facebook.jpg') no-repeat center center fixed;
  background-attachment: fixed;
  // background-size: cover;

}

.bg-img {
  background: -moz-radial-gradient(center, ellipse cover, $body-color1 0%, $body-color2 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0 $body-color1), color-stop(100%,$body-color2)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* W3C */
  opacity: 0.5;
  z-index: 0;
}

HTML：

<div class="bg-img">Insert large body of text here or elements.</div>

http://codepen.io/anon/pen/NPeqMJ

【问题讨论】：

“我如何使类中的元素不透明”——不使用opacity——不透明度适用于包括其所有内容的元素。
如果我这样做，我将失去图像顶部的透明渐变。图像将被覆盖。有没有办法在图像顶部仍然具有透明渐变效果，同时具有不透明元素？
渐变也应该与rgba 颜色一起使用。

标签： html dom sass gradient

【解决方案1】：

将你的身体颜色改为：

$body-color1: rgba(242, 0, 159, 0.5);
$body-color2: rgba(33, 139, 219, 0.5);

并从.bg-img 中删除opacity

Demo

【讨论】：

哇，非常感谢 Jon P！这就是我正在寻找的答案！

【解决方案2】：

要将元素放在顶部，您可以使用z-index 属性。确保该值足够大以防止其他元素出现在顶部

z-index: 99999;

【讨论】：

我尝试使用不同的 z-index 向 bg-img 添加一个内部类。那也没用。