0

背景の画像の上に不透明度のある CSS 要素があります。その要素内には、不透明度を継承する画像があるため、画像は通常よりもやや暗くなります。

<body>
 <div class="trans">
  <img class="not_trans" src="test.png">
 </div>
</body>

CSS:

body{
 background:url(stars.gif);
 background-color:black;
}
.trans{
 opacity:0.4;
}
img.not_trans{
 opacity:1.0;
}

しかし、画像はまだ半分透明です。

imgを外に移動せずに、通常の非透過画像を実現するにはどうすればよいdivですか?

異なる背景色でカスケードされた多くの要素がある場合、
background-color:rgba(0,0,0,0.4)代わりにを使用するのopacityは簡単なオプションではありません

img周囲の要素の透明度を継承しない要素を1 つだけにしたい

少なくとも、javascript を使用した解決策があります。

  1. DOM 内の img タグを div の外に移動します
  2. 代わりにスペーサーを設定します
  3. imgそれがあった場所に配置しますposition:absolute

しかし、CSSで解決策はありますか?

4

1 に答える 1

1

不透明度の代わりにrgbaを使用してください.trans！rgba(0, 0, 0, 0.4) のように。またはあなたが持っているどんな色でも。

于 2013-03-27T22:24:20.723 に答える