6

div内の画像を不透明にし、divを透明にしたい。image と div の不透明度を設定しようとしましたが、うまくいきません。

jsFiddle リンク: http://jsfiddle.net/2BNEF/10/

画像を不透明にし、テキストを透明に表示したい。

<div id="targetframe">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes
    <div id="target">
        out. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their defaul
        <img class="myimage" src="http://www4.picturepush.com/photo/a/1365552/480/trucks-photgraphy/asdf-%2858%29.jpg?v0"/>
    </div>
</div>


#targetframe {
    background: none repeat scroll 0 0 black;
    border: 2px inset grey;
    font-family: Verdana,sans-serif;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    opacity: 0.5;
}
#target {
    background: none repeat scroll 0 0 transparent;
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 0;
}
.myimage {
    opacity: 1;
}
4

3 に答える 3

7

要素に設定opacityすると、その要素のすべての子孫 (子、すべての子の子...) に継承され、それを防ぐためにできることは何もありません。

この場合、div に RGBa 背景 (rgba(0,0,0,.5)黒 - DEMOの代わりに) を使用できます。RGBa は優れたサポートを提供します。これをサポートしていないブラウザーは IE8 以前であり、filterグラデーションを使用できるブラウザーのみです。

于 2012-09-04T18:42:48.123 に答える
1

または、必要な高さと幅を持つ絶対配置の div をコンテナに取り、画像も配置し、画像に高い z-index を割り当ててから、必要な不透明度を割り当てます。

于 2012-09-04T18:53:49.603 に答える
1

@Anaが言ったように、不透明度は親のすべての子に継承されます
RGBaを組み合わせて、Divのすべての子に不透明度を設定できます

#targetframe > * {
    opacity: 0.5;
}

画像が不透明でなければならないことを指定するよりも

.myimage {
    opacity: 1;
}

http://jsfiddle.net/2BNEF/15/

于 2012-09-04T18:46:14.417 に答える