CSSの背景の不透明度

Question

私は、次のコードに似た何かを使用しています：私は、これは背景が0.4の不透明度は100％の不透明度を持っているテキストを持っていることが期待

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

を。代わりに、両方とも0.4の不透明度を持ちます。

Answer 1

子供は不透明を継承します。彼らがしなければ、それは不思議で不便かもしれません。

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

例は、50％が黒の背景を色あせ：

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

Answer 2

内側のdivは、40％の不透明度を有し、それが（にネストされたDIVの不透明度が100％を持っているからです）。

これを回避するために、あなたができることがいくつかあります。あなたはそのような二つの別々のdiv作成することができ

：

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

は敬遠しがち背景で、ご希望のCSSの不透明度およびその他のプロパティを設定し、スタイルや位置にbContent div要素をZ-indexプロパティ（z-index）を利用します。これで、背景のdivのdivオーバートープを置くことができます。

---

もう1つのオプションはRGBaです。これにより、divをネストし、div固有の不透明度を達成することができます。

---

最後のオプションは、単にあなたが選択のあなたの目的の画像エディタで希望の色の半透明の.pngイメージを作ることである、「画像のURLに背景画像のプロパティを設定し、その後、あなたは勝ちましたcssについて心配したり、ネストされたdiv構造の機能と構成を失ったりする心配がありません。

Answer 3

この

<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であらかじめ画像の不透明度を変更することはできません。

Answer 4

CSS 3 :beforeを使用すると、半透明の背景を持つことができます。これは、1つのコンテナで行うことができます。http://codepen.io/anon/pen/avdsi

注：あなたがz-index値を調整する必要があるかもしれませんそして、

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); 
} 

サンプルいくつかのCSSを適用し、この

<article> 
    Text. 
</article> 

のようなものを使用してください。

Answer 5

次の方法は、あなたの問題

1. CSS Aplha透明性方法（IE 8では動作しません）

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

2. あなたに応じて透過PNG画像を使用することを解決するために使用することができます背景としての選択。

3. 次のCSSコードスニペットを使用して、クロスブラウザのアルファ透明な背景を作成します。ここでは、オンラインでのCSSジェネレータを持っている。この技術に関する詳細については

   .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; 
   } 
   

#000000 0.4 @％の不透明度、thisを参照してください、との例があります。

Answer 6

.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)";} 

Answer 7

あなたは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) 

もっと見る：http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

Answer 8

ちょうど背景と同じフォアグラウンドに幅と高さを置くか、上、下、左と右の特性を有するようにしようとしていることを確認してください。

<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>