web-dev-qa-db-ja.com

子要素に影響を与えずに背景画像の不透明度を設定する

子要素の不透明度に影響を与えずに背景画像の不透明度を設定することは可能ですか？

例

フッター内のすべてのリンクにはカスタムの箇条書き（背景画像）が必要です。カスタムの箇条書きの不透明度は50％にする必要があります。

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}

私が試したこと

リストアイテムの不透明度を50％に設定しようとしましたが、リンクテキストの不透明度も50％になりました - そして子要素の不透明度をリセットする方法はないようです。

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

私もrgbaを使ってみましたが、それは背景画像には何の影響もありません：

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
csscss3opacity
195
jmohr

画像を画像エディタに取り込み、不透明度を下げて、.pngとして保存して代わりに使用します。

89
2ToneKenobi

CSSのlinear-gradient()をrgba()と一緒に使うことができます。

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>
60
Stickers

これはすべてのブラウザで動作します

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

透明度がコンテナ全体とその子に影響を与えたくない場合は、この回避策を確認してください。あなたは絶対位置の子と相対位置の親を持っていなければなりません。

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ でデモを確認する

42
Hussein

画像を箇条書きとして使用している場合は、疑似要素の前に：を考慮することができます。

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}
28
Mr Griever

画像をdiv：afterまたはdiv：beforeに置き、その「仮想div」に不透明度を設定することができます。

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

ここにあります http://css-tricks.com/snippets/css/transparent-background-images/

13
Zied Hamdi
#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

不透明度.99（1未満）のハックはz-indexコンテキストを作成するので、グローバルz-index値について心配することはできません。 （それを削除して、親ラッパーが正のz-indexを持つ次のデモで何が起こるかを確認してください。）
あなたの要素がすでにz-indexを持っているなら、あなたはこのハックを必要としません。

このテクニックのデモ 。

8
user

残念ながら、この答えを書いている時点では、 これを行う直接的な方法はありません 。必要がある：

  1. 背景には半透明の画像を使用します（はるかに簡単です）。
  2. 不透明にしたい子の隣に余分な要素（divのような）を追加し、それに背景を追加し、それを半透明にした後、それを上記の子の後ろに配置します。
4
Reyraa

"filter"プロパティは、IE7/8で動作するために、doubleではなく、不透明度のパーセンテージの整数を必要とします。

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

P。S：編集のために最低6文字の変更が必要なので、回答としてこれを投稿します。

3
lyubeto

本当に微調整するために、私は適切な選択をブラウザターゲティングラッパーに置くことを勧めます。 IE7とIE8を「他の人たちとうまく遊べる」ようにすることができなかったとき、これが私にとって唯一のものでした（私は現在それらをサポートし続けるソフトウェア会社のために働いているので）。

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

私は上記のコードに冗長性があるかもしれません - 誰かがそれをさらにクリーンアップしたいのであれば、遠慮なく！

2
code-sushi

上記に追加するだけで、あなたは新しいカラー属性を持つアルファチャンネルを使うことができます。 rgba（0,0,0,0）[OK]これは黒ですが、不透明度はゼロで親として子には影響しません。これはChrome、FF、Safariなどでしか動作しません。

あなたの16進数の色をRGBAに変換する

1
Undefined

私はこの問題についてとても良くて簡単なチュートリアルを見つけました。私はそれがとてもうまくいくと思います（そしてそれはIEをサポートしますが、私は私のクライアントに他のブラウザを使うように言うだけです）：

子要素に影響を与えずに、CSSaの背景の透明度をRGBaとフィルタを通して

そこから、グラデーションサポートなどを追加できます。

1
Francisco

不透明度を行頭文字だけに設定する必要がある場合は、アルファチャンネルを画像に直接設定しないでください。ところで、要素全体（そしてその子も）の不透明度を変えずに、cssを使って不透明度を背景画像に設定する方法はないと思います。

1
Minkiele
#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

あなたはこのコードを試すことができます。私はそれがうまくいくと思います。 demo にアクセスできます。

0
Jakir Hossain

もう一つの選択肢は CSS Tricks 私たちが探している不透明な背景効果を偽造するために疑似要素をその真後ろの元の要素の正確なサイズに挿入するアプローチです。場合によっては、擬似要素の高さを設定する必要があります。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

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