web-dev-qa-db-ja.com

CSS背景の不透明度

次のようなコードを使用しています。

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

背景の不透明度は0.4、テキストの不透明度は100％になるようにします。代わりに、それらは両方とも0.4の不透明度を持ちます。

htmlcssopacity
599
John Wheal

子供たちは不透明度を継承します。そうでなければ、奇妙で不便になるでしょう。

背景画像に半透明のPNGファイルを使用するか、背景色にRGBa（アルファ用）色を使用できます。

例、50％が黒の背景を褪色させる：

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
1038
AlienWebguy

あなたは半透明の背景を持つためにCSS 3 :beforeを使うことができ、あなたはただ一つのコンテナでこれをすることができます。このようなものを使う

<article>
  Text.
</article>

それからいくつかのCSSを適用する

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

サンプル： http://codepen.io/anon/pen/avdsi

注：z-index値を調整する必要があるかもしれません。

160
daniels

以下の方法はあなたの問題を解決するために使用することができます。

  1. CSSアルファ透明度方式（Internet Explorer 8では機能しません）：

    #div{background-color:rgba(255,0,0,0.5);}

  2. 背景としてあなたの選択に従って透明なPNG画像を使用してください。

  3. クロスブラウザのアルファ透明の背景を作成するには、次のCSSコードスニペットを使用します。これは#000000 @ 0.4％の不透明度の例です。

    .div {
    background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

このテクニックに関するさらなる詳細については、オンラインCSSジェネレータを持っている this を見てください。

43
Achyuth Ajoy

私はこのようなことをするだろう

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS：

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

それはうまくいくはずです。これは、色ではなく半透明の画像BTWが必要であると仮定しています（これにはrgbaを使用するだけです）。また、Photoshopで画像の不透明度をあらかじめ変更することはできないと想定されています。

27
Peter Lada
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
7
Wael Wafik

Sass 'transparentizeを使用できます。

私はそれが最も便利で使いやすいと感じました。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

もっと見る：#transparentize（$ color、$ amount）⇒Sass :: Script :: Value :: Color

6
ilan weissberg

これは、内側のdivがネストされているdivの不透明度の100％（40％の不透明度）を持つためです。

それを回避するために、あなたができることがいくつかあります。

次のように2つの別々のdivを作成できます。

<div id="background"></div>
<div id="bContent"></div>

背景にCSSの不透明度などのプロパティを設定し、z-indexプロパティ（ z-index ）を使用してbContent divのスタイルと位置を設定します。これにより、不透明度を損なうことなく、背景divのdiv倍音を配置できます。

他のオプションは RGBa です。これはあなたがあなたのdivを入れ子にしてまだdiv特有の不透明度を達成することを可能にするでしょう。

最後のオプションは、好みのイメージエディタで希望の色の半透明の.pngイメージを作成し、background-imageプロパティをそのイメージのURLに設定するだけです。 CSSでは、入れ子になったdiv構造の機能と編成が失われます。

3
zillaofthegods

前景の幅と高さを背景と同じにするか、top、bottom、left、rightの各プロパティを設定してください。

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>
2
Niño Angelo Orlanes Lapura