-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は透明である必要があります。また、z-indexの数が多いtoninojのアイデアを提案します。

ともかく。なぜあなたはこれをしたいのですか？私が推測できる唯一の説明は、右クリックをWebページに抵抗させることですが、その目標を達成するための他のより良い方法があります。

于 2012-11-19T13:05:16.933 に答える
0

ページ内のすべての上に png オーバーレイが必要な場合は、オーバーレイ div をすべてのコンテンツから空にし、z-index を 20000 などに増やす必要があります。

ただし、あなたが何をしようとしているのかは 100% わかりません。

しかし、ブラウザ間の互換性という点では css に勝ると思います。

はい、画像の URL に引用符を使用してください。

于 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 に答える