透明度のある の中にあるときに、コンテンツ/画像を非透明にする方法はあります<div>
か?
HTMLは次のとおりです。
<div id="main-button-wrapper" class="left">
<div id="button-bg-layer" class="box-bg-layer corners"></div>
<div class="buttons-bg-overlay box-bg-overlay corners">
<img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />
</div>
</div>
CSS:
#main-button-wrapper {
height: 319px;
margin-left: 22px;
position: relative;
width: 321px;
}
#button-bg-layer {
position: absolute;
right: 0;
height: 319px;
width: 321px;
}
.buttons-bg-overlay {
position: relative;
right: 0;
margin: 11px;
height: 66px;
width: 299px;
text-align: center;
padding-top: 26px;
}
#buttons-wrapper {
position: relative;
width: 299px;
height: 297px;
z-index: 3;
margin: 22px;
}
/* Background Layers */
.box-bg-layer {
background-color: #010101;
z-index: 1;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
.box-bg-overlay {
background-color: #010101;
z-index: 2;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
画像に貼ってみましz-index: 4;
た。私が考えることができる他の唯一の方法は、div の背景を絶対配置として設定し、コンテンツを div の外に配置することですが、もっと簡単な方法が必要ですか?
どんな助けでも大歓迎です!
JSFiddle を参照してください。