背景画像の不透明度を変更する

Question

テキストブロックを含むdiv要素と、背景画像を設定した親divがあります。今、私は背景画像の不透明度を減らしたいと思います。私がそれをどうやって行うことができるかお勧めします。

ありがとうございます。

EDIT：

私は私のブログの記事は、HTMLコンテンツを編集することにより、blogger.comを見る方法を変更するために探しています。次のようにHTMLコードが見えます：

<div> 
//my blog post 
</div> 

私は以下のように別途のdiv div要素と上記のコード全体を包囲し、それぞれの不透明度を設定しようとしました：

<div style="background-image:url("image.jpg"); opacity:0.5;"> 
<div style="opacity:1;"> 
//my blog post 
</div> 
</div> 

しかし、それは動作しません。

Answer 1

背景の不透明度は何もありません。不透明度は、要素、その内容、およびすべての子要素に適用されます。そして、この動作は、子要素の不透明度をオーバーライドするだけでは変更できません。

子と親の不透明度は長年にわたる問題であり、最も一般的な修正はrgba(r,g,b,alpha)の背景色を使用しています。しかし、この場合、背景画像なので、その解決法は機能しません。 1つの解決策は、画像自体に必要な不透明度を有するPNGとして画像を生成することである。別の解決策は、子供のdivを取ってそれを絶対的な位置にすることです。

あなたが直接、背景画像の透明度を使用することはできませんが、あなたはこのようなもので、この効果を得ることができ

Answer 2

：

http://jsfiddle.net/m4TgL/

HTML：

<div class="container"> 
    <div class="content">//my blog post</div> 
</div>​ 

CSS：

.container { position: relative; } 

.container:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    background-image: url('image.jpg'); 
    opacity: 0.5; 
} 

.content { 
    position: relative; 
    z-index: 2; 
}​ 

Answer 3

あなたは簡単なコードでこれを行うことができます：

filter:alpha(opacity=30); 
-moz-opacity:0.3; 
-khtml-opacity: 0.3; 
opacity: 0.3; 

Answer 4

あなたは、いくつかのdivを作成して行うことができます。

<div style="width:100px; height:100px;"> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div> 
</div> 

私がやったこと数回...今日で

Answer 5

...まだ効果的な、シンプルで、それを行うことが可能ですCSSプロパティー"background-blend-mode"を使用するだけです。

<div id="content">Only one div needed</div> 

div#content { 
    background-image: url(my_image.png); 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    /* You may add things like width, height, background-size... */ 
} 

背景色（白、0.6不透明度）を背景画像にブレンドします。詳細はhere (W3S)をご覧ください。

Answer 6

以前のコメントに対応して、CSSがPHPページにあり、CSSスタイルシートではない場合は、コンテナの例で変数を使用して背景を変更できます。私が何をしたか

$bgimage = '[some image url]; 
background-image: url('<?php echo $bgimage; ?>'); 

Answer 7

です：

<div id="bg-image"></div> 
<div class="container"> 
    <h1>Hello World!</h1> 
</div> 

CSS：

html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    height: 100%; 
    width: 100%; 
} 
#bg-image { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background-image: url(images/background.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    opacity: 0.3; 
}