3

以下は、背景カバーを設定するためのコードです。背景カバーの透明度を設定して、その上にテキストを表示できるようにします。以下のように解決策を得ましたが、うまくいきません。どこが欠けているのかわかりません。

 style="background: url(images/football_ground.jpg) no-repeat center center fixed;-webkit-         
     background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;-moz-opacity:.30; 
filter:alpha(opacity=30); 
-khtml-opacity: 0.3;  ">
4

4 に答える 4

4

現時点では、CSS は背景画像のアルファ値の変更を許可していません。これを回避したい場合は、いくつかの異なるオプションがあります。

  1. 背景画像を適切な不透明度の透明な png として保存するだけです。
  2. 背景画像を、相対的に配置された親コンテナー内の絶対的に配置された独自の要素にします。

.

<div class="parent">
    <div class="background"></div>
    <div class="foreground">some text</div>
</div>
于 2013-01-26T14:44:59.187 に答える
3

CSS opacity プロパティは、背景だけでなく要素全体の不透明度を設定します。したがって、コードは実際には、背景とテキストの両方のコンテンツの不透明度を 0.30 に設定しています。

目的を達成するには、2 つの要素を使用する必要がある場合があります。

于 2013-01-26T14:40:21.147 に答える
0

不透明度は、要素とその子孫の両方に影響します。

2つの要素に分割する必要はありません。透明性を実現するには、代わりにRGBを使用してください。4番目の引数alphaは、要素の透明度を設定します。

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

于 2013-01-26T15:25:32.710 に答える