3

たくさんのパネルで構成されたウェブサイトを作っています。これらのパネルにはすべて繰り返しテクスチャがありますが、サイトの見栄えを良くするために、色付きの 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>

4

3 に答える 3

6

不透明度はブロック全体に影響するため、2 つの異なるものを使用できますdiv。1 つは色合い用、もう 1 つはコンテンツ用です。両方をabsolute配置します。

HTML

<div class="ExpDiv" style="float:left;">
    <div class="tint" style="background: #ff0000; "></div>
    <div class="content">Content For these Divs will be inserted by the Owner...</div>
</div>

CSS

.tint {
    position:absolute;
    height:100%;
    width:100%;
    opacity:0.4;
    z-index:1;
    filter:alpha(opacity=40);
}
.content {
    position:absolute;
    height:100%;
    width:100%;
    z-index: 99;
}
.ExpDiv {    
    position: relative;
    width: 150px;
    height: 200px;
}

=> 簡素化および更新された jsFiddle

于 2013-03-14T15:34:19.907 に答える
5

不透明度は要素全体に影響します。背景にrgbaを使用できます。

background: rgba(153, 204, 255, 0.4); /* #99CCFF */
background: rgba(153, 103, 153, 0.4); /* #996699 */
于 2013-03-14T15:26:46.370 に答える
1

私はこの種の問題に十分長い間取り組んできました。これは主に、半透明の div 背景を使用するのが好きで、テキストを部分的に透明にしたくない場合があったためです。問題は似ていると思います。

経験上、必要な透過性を持つ 10x10 ピクセルの png をいくつか生成し、それらを div の背景として使用することをお勧めします。頭痛の多くを解決します。これで発生する可能性のある唯一の問題は、IE6以下がpngをサポートしていないと思いますが、これを解決するためのjsライブラリがあったことです。

位置やものをハッキングするほとんどのアプローチは、クロスブラウザーで機能せず、コードの変更をかなり厄介なものにする可能性があります。

于 2013-03-14T15:38:07.120 に答える