web-dev-qa-db-ja.com

divコンテンツを変更せずに背景画像の不透明度を変更するにはどうすればよいですか？

「divコンテンツを変更せずに背景画像の不透明度を変更するにはどうすればよいですか？」

検索しすぎたため、この問題を解決する良い答えが見つかりません。

[〜＃〜] html [〜＃〜]

<div class="div-1">
    <h2>title</h2>
    <p>text</p></div>

[〜＃〜] css [〜＃〜]

.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
csscss3opacity
10
hadivoice

要素のすべての子はそのCSSの影響を受けるため、背景画像の不透明度を単純に設定することはできませんが、これにはいくつかの回避策があります。

1.透明な背景画像を使用する（最も簡単なimo）

背景画像の不透明度を事後に設定するのではなく、お好みの画像エディターで背景画像を透明にしてください （gimpを試してみてください、無料です！） そして、透明な画像（PNGなど）として保存します。

2.ポジショニングを使用します。

親要素に相対的な配置を設定し、子要素を内部に絶対配置すると、フローから除外され、親の不透明度の影響を受けなくなります。 [ソース]

3.同じ位置で兄弟要素を使用する

コンテンツを親から分離し、2つの要素を兄弟にする場合、Zインデックスを使用して、親の上に子であった要素を配置し、子に影響を与えずに親の不透明度を設定できます。

他にもありますが、そのうちの1つがあなたの望むものを手に入れるはずです。

9
David

[〜＃〜] demo [〜＃〜]

Background-imageにはafterまたはbefore擬似要素を使用できます。

Css：

.has-bg-img{
    position: relative;
}
.has-bg-img:after {
    content:'';
    background: url('http://placehold.it/500x100') no-repeat center center;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
10
Imran Bughio

CSSプロパティbackground-opacityはありませんが、背後にある要素の正確なサイズの通常の不透明度を持つ擬似要素を挿入することで、それを偽造できます。

実行方法を確認します http://css-tricks.com/snippets/css/transparent-background-images/

4
patas1818

これを試すことができます.....

 <div style="position:relative; ">      
      <div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>

       <div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
            Your Div Contents are  Here..................
       </div>
    </div>
0
Md. Rahman