たくさんのパネルで構成されたウェブサイトを作っています。これらのパネルにはすべて繰り返しテクスチャがありますが、サイトの見栄えを良くするために、色付きの div と不透明度を使用して画像に色を付けることにしました。これ以上写真を使用したくないので、画像の色を変更することを提案しないでください。
私の問題は、テキストをティント div に入れると、フォントが不透明度を継承し、白ではなく灰色になることですが、ティント div の外に置くと、ティントが失われます。
.tint {
display: block;
position: static;
height: 100%;
width: 100%;
line-height: 100%;
opacity: 0.4;
z-index: -1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
.ExpDiv {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
border: solid 3px;
-webkit-transition: all .5s ease-in-out 0.2s;
-moz-transition: all .5s ease-in-out 0.2s;
-ms-transition: all .5s ease-in-out 0.2s;
-o-transition: all .5s ease-in-out 0.2s;
transition: all .5s ease-in-out 0.2s;
background-color: #99ccff;
min-width: 7px;
min-height: 9px;
max-width: 150px;
max-height: 200px;
overflow: hidden;
background-image: url(striped_linenen.png);
background-repeat: repeat;
float: left;
}
<div class="ExpDiv" style="float:left;">
<div class="tint" style="background: #99CCFF; ">
Content For these Divs will be inserted by the Owner...
</div>
</div>
<div class="divider">
<br />
</div>
<div class="ExpDiv" style="float:left;">
<div class="tint" style="background: #996699; "></div>
Content For these Divs will be inserted by the Owner...
</div>