1

透かし入りのhtmlページを作りたいです。本体に背景画像を設定しました。ただし、背景画像がにじみ出さない要素がいくつかあります。それらは独自の background-color (background-image ではなく) を定義し、本体の色をオーバーライドします。これには驚きました。画像は上書きせず、色のみを上書きしました。

背景色が異なる要素を含むページに透かしを表示することは理にかなっているようです。

標準の html/css を使用して必要な効果を得るにはどうすればよいですか?

問題を示すサンプル コードを次に示します。透かし画像が白いブロックで覆われていることに注意してください。

<html>
<head>
<style type="text/css">

.everything
{ 
    background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }

#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">

  <table id="table1"><tr><td>Top</td></tr></table>
  <!-- This table put a big white line over my watermark image. -->
  <table id="table2"><tr><td>Middle</td></tr></table>
  <table id="table3"><tr><td>Bottom</td></tr></table>

  <div id="div1"><tr><td>Top</td></tr></div>
  <!-- Thought maybe it was a table thing but nope, divs do it too. -->
  <div id="div2"><tr><td>Middle</td></tr></div>
  <div id="div3"><tr><td>Bottom</td></tr></div>

</body>
</html>
4

4 に答える 4

3

残念ながら、これは意図された動作です。background-imageプロパティのbackground-colorサブbackgroundプロパティです。#table2とで背景を定義したので#div2、ページの背景まで「透けて」見ることができなくなりました。

CSS3 ではrgba()式を使用して背景の不透明度を設定できますが、IE はこれをサポートしていません ( Firefox 3 および Safari/Webkit はサポートしています)。IE で rgba() のような効果を得るにはfilter:、次のようなルールを使用できます。

#table2 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
    background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}

startColorstrパラメータとendColorstrパラメータにアルファの 4 番目の値があることに注意してください。

于 2009-02-26T23:34:14.087 に答える
1

巧妙な HTML/CSS ハックなしに、やりたいことを達成する方法はありません。要素の背景色を設定すると、その下の画像が「にじみ」ません。

于 2009-02-26T23:33:15.930 に答える
1

ここで CSS 不透明度の設定を調べることができます: http://www.quirksmode.org/css/opacity.html

ただし、これは要素内のテキストにも適用されると思います (テストされていません)。そのため、テーブル内のテキストの不透明度を 1 に戻すには、2 番目のクラスが必要になる可能性があります。

于 2009-02-26T23:44:36.463 に答える
0

body 要素の background-image を設定しています。div と table は透明ではなく、 body 要素の前にあるため、透かしが隠れています。

透かしを各要素に個別に適用する場合は、次のようにする必要があります。

#table1, #table2, #table3, #div1, #div2, #div3 { 
    background: url(/images/shield-25.png) blue no-repeat center;
}

または多分

table, div { 
    background: url(/images/shield-25.png) blue no-repeat center;
}
于 2009-02-26T23:33:37.830 に答える