-2

我正在尝试制作一个没有不透明 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>

结果：

结果

谢谢！

4

3 回答 3

0

url 应该是url('spotlight.png');，当然 png 必须是透明的。我还建议 toninoj 的想法与高数 z-index。

反正。你为什么要这样做？我能猜到的唯一解释是使右键单击抵抗网页，但还有其他更好的方法可以实现该目标。

于 2012-11-19T13:05:16.933 回答
0

如果您希望 png 覆盖页面中的所有内容，则需要将覆盖 div 中的所有内容都清空，并将 z-index 增加到 20000 或其他值。

虽然，我不是 100% 确定你想要做什么。

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

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

于 2012-11-19T13:05:35.683 回答
0

这个怎么样？

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;
}
于 2012-11-19T13:17:36.567 回答