如何使文本等元素出现在堆叠背景之上？

Question

我有一个网站，正文包含固定背景图像，div class 包含透明径向渐变层。如何使 class 中的元素不透明并显示在背景渐变和背景图像之上？

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

Answer 1

为了把元素放在最上面，可以使用z-index属性。确保该值足够大以防止其他元素出现在顶部

z-index: 99999;

Answer 2

将 body 颜色更改为：

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

并从 .bg-img

中删除 opacity

Demo

如何使文本等元素出现在堆叠背景之上？

How to make elements such as text appear on top of stacked backgrounds?

html

dom

gradient

sass