1

JQuery ライブラリを使用しています。いくつかの div を透明 (0.7) にします。そのdivにはいくつかのテキストがあります。そして、不快な状況が見られます。テキストのフォントが醜いです。私が理解しているように、すべての div-area が透明であるため、私のテキストも同様です。不透明にすることはできますか？

更新

div を非透明にしようとしました: テキストは素晴らしいです! では、どうすれば div を透明にできますが、そこに含まれるテキストは透明であってはなりません。

Win、Linux、MacOS でテスト済み。Chrome、Firefox、Opera、IE

4

4 に答える 4

0

rgba（）を使用してボックスの色を指定できます。rgba（）は子要素に継承されません。残念ながら、rgbaは最新のブラウザ（FF、safari、chrome）でのみサポートされていますが、使用するのは素晴らしいことです。

#yourbox {
    background-color:rgba(red,green,blue,alpha);
{

RGBで必要な色の値を取得し、最後にアルファ値を設定するだけです。また、それをサポートしていないブラウザのフォールバック値も設定する必要があります。

#yourbox {
background-color:#fff;    
background-color:rgba(255,255,255,0.5);
{

これにより、最新のブラウザのほとんどで不透明度が50％の白いボックスが表示されますが、IEのほとんどのバージョンでは白いボックスが表示されます。

于 2009-11-06T22:29:06.260 に答える
0

興味深い質問です。これが私の頭に浮かぶ解決策です：

<style>
  .wrapper {position:relative;}
  .transparent { position:absolute; background:red; top:0; bottom:0; left:0; right:0;}
</style>

<script>
  $(document).ready(function(){
    $('.transparent').css('opacity',.7)
  });
</script>

<div class="wrapper">
   <div class="transparent"> </div>
   <div class="opaque">your text</div>
</div>

基本的に、透明なボックスの上にテキストを配置します。

于 2009-11-06T21:51:32.570 に答える
0

半透明の背景用のジェネリック クラス、非表示のテキスト コンテナー用のジェネリック クラス、特定のインスタンス用のクラスを、任意のサイズと位置のスタイルで作成します。たとえば.color_box、.text_box、 、および.side_note. 次に、次のようなコードを作成します。

次のようなスタイル:

.color_box, .text_box {
position: absolute;
z-index: 20;
...
}

.color_box {
background: #xxxxxx;
opacity: .5;
z-index: 10;
...
}

.side_note {
top: 50px;
left: 100px;
width: 240px;
...
}

HTML は次のようになります。

<div class="text_box side_note">lorem ipsum dolor sig amet...</div>
...
<div class="color_box side_note"></div>

2 番目の div は、最初の div と同じコンテナー内のどこにでも配置できます。SEO の目的には役立たないため、できるだけ遅く配置することを好みます。この特定のセットアップは、このような半透明のボックスが多数あるサイトに最も役立ちます。.color_box新しいセットアップを作成するには 1 つのクラスが必要で、それぞれにとクラスを再利用します.text_box。背景色を変更する必要がある場合は、1 か所にあります。1 つのボックスの配置は、1 つのクラス内にあります。

于 2009-11-08T04:48:53.560 に答える
0

私は半透明の .png ファイルを使用し、IE6 のハックを使用する傾向があります。これについては、このスレッドで他のオプションと共に説明されています。

于 2009-11-06T22:27:03.627 に答える