2

私のウェブサイトには、テキストが配置されたスライダーがあります。テキストに黒の透明な背景を付けたので、もう少し読みやすくなります。

ここに画像の説明を入力

ご覧のとおり、まさに私が達成しようとしている効果です。しかし、何らかの理由で、CSS は不透明度フィルターを使用してテキストにも影響を与えます...
テキストはもう 100% 白ではありません。この種の CSS の動作を無効にする方法はありますか?

編集：IE8をサポートする必要があります...

これは私のCSSです：

.front-slider-body {
  background-color: #000;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
4

4 に答える 4

3

opacityこれは、背景だけでなく、要素全体が変更されたためです。

だけを不透明にしたい場合は、16進コードの代わりにbackground-color使用して、そのプロパティの不透明度を変更します。rgba

background-color: rgba(0,0,0, 0.5);

フルクラス：

.front-slider-body {
  background-color: rgba(0,0,0, 0.5);
  zoom: 1;
}

以下に、これがサポートされているブラウザのリストを示します。

http://caniuse.com/#search=rgba

古いブラウザをサポートする必要がある場合は、1px * 1pxの半透明の画像を作成し、それをとして使用することをお勧めしbackground-imageます。整頓されていませんが、古いブラウザ向けのソリューションです。

于 2013-01-24T09:41:28.383 に答える
1

それ以外の

background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;

使用する

background-color: rgba(0,0,0, .5);

rgba()で使用可能でIE>8あり、背景にのみ影響し、テキストとネストされた要素は完全に不透明になります

于 2013-01-24T09:40:13.560 に答える
0

最新のブラウザー (IE9+、FF、Chrome)

を使用して、要素全体ではなく背景だけに透明性を提供します（他の人が指摘したように）

background-color: rgba(0, 0, 0, .5);

古いブラウザー (IE7+ を含む)

古いブラウザー(Microsoft の種類)はサポートしていないrgbaため、この場合、PNG とアルファ チャネルを使用して同じ結果を得ることができます (また、最新のブラウザーでも機能します)。

background-image: url(transBack.png);

PNG は透明度 50% の黒である必要があります。

于 2013-01-24T09:44:49.067 に答える
0

背景をテキストから分離してみてください。テキストは親の不透明度を継承します。これが直面している問題です。これを修正するには、背景をテキストの兄弟として設定します。したがって、代わりに：

// Just example layout
<div id="container" style="background: #000; opacity: 0.5;">
    Your Text
</div>

あなたは試すことができます：

<div id="container" style="position: relative;">
    <div id="background" style="position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.5;" ></div>
    <div id="text">Your Text</div>
</div>

(明らかに、クラスと、よりクロスブラウザーに準拠した CSS を使用します。これは、概念を示すためのものです)

于 2013-01-24T09:51:28.907 に答える