文本CSS之前的透明PNG

Question

我正在尝试制作一个没有不透明度css内容的页面，但是在所有文本和图像上都有透明图像。只是，我不能得到文本的背景。

CSS：

   background-image: url('spotlight.png');
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;

HTML简单：

<div class="darkLayer"></div>

结果：

谢谢！

Answer 1

网址应为url('spotlight.png');，当然png必须是透明的。我还建议使用高数字z-index的toninoj的想法。

无论如何。你为什么要这样做？我能猜到的唯一解释是制作右键点击抗拒网页，但还有其他更好的方法可以实现这一目标。

Answer 2

如果您希望png叠加在页面中的所有内容上，则需要将覆盖div替换为所有内容，并将z-index增加到20000或其他任何内容。

虽然，我并不是100％确定你要做什么。

但我认为它在跨浏览器兼容性方面确实超过了css。

是，在图片网址上使用引号。

Answer 3

这个怎么样？

http://jsfiddle.net/Z8rkT/

在此示例中，您只需用透明背景图像替换背景/不透明度线。

---

<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, metus pharetra euismod eleifend, nisi est tempor massa, vel consectetur lorem elit non ante. Nulla facilisi. Nulla id libero eu erat suscipit pellentesque ultrices quis tellus. Donec ante dui, scelerisque nec venenatis id, suscipit sit amet ligula. Nulla turpis justo, fermentum id ullamcorper condimentum, posuere sit amet ligula. Praesent auctor, mi at tempor tincidunt, felis libero pretium ipsum, quis iaculis odio erat eu urna. Integer vel fermentum ipsum. Duis sit amet accumsan nunc. Nulla facilisi. Etiam condimentum nulla nec quam venenatis laoreet. Etiam massa ipsum, pellentesque sed imperdiet eget, ornare eget est. Fusce pulvinar lorem in nunc tempus fringilla. Vivamus posuere augue a mi interdum rhoncus. </p>
</div>

<div class="overlay"></div>


 html, body {
 width:100%;
 height:100%;
}

.wrapper {
 position:relative;
 z-index:1;
}

.overlay {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:#333;
 opacity:0.75;
}