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

例

フッターのすべてのリンクにはカスタムの箇条書き（背景画像）が必要であり、カスタムの箇条書きの不透明度は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%;
}

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

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

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

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/でデモを確認してください

画像を箇条書きとして使用している場合は、：before疑似要素を検討できます。

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

画像を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/

#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がある場合、このハックは必要ありません。

このテクニックのデモ。

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

1. 背景に半透明の画像を使用します（はるかに簡単です）。
2. 不透明にする子の隣に要素（divなど）を追加し、背景を追加して、半透明にした後、言及した子の後ろに配置します。

もう1つのオプションは、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;   
}

「filter」プロパティは、IE7 / 8で機能するために、不透明度のパーセンテージを2倍ではなく整数にする必要があります。

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

PS：私はこれを回答として投稿します。SOなので、編集には少なくとも6つの変更された文字が必要です。

本当に微調整するために、ブラウザーをターゲットとするラッパーに適切な選択を配置することをお勧めします。これは、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);
}

上記のコードに冗長性がある可能性があります-誰かがそれをさらにクリーンアップしたい場合は、お気軽に！

弾丸のみに不透明度を設定する必要がある場合は、画像に直接アルファチャネルを設定してみませんか？ちなみに、要素全体（およびその子）の不透明度を変更せずにcssを介して背景画像に不透明度を設定する方法はないと思います。

上記に追加するだけです。新しいカラー属性を持つアルファチャネルを使用できます。rgba（0,0,0,0）わかりました。これは黒ですが、不透明度がゼロなので、親としては子に影響しません。これはChrome、FF、Safariでのみ機能します。

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

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

RGBaとフィルターを介して、子要素に影響を与えずにCSSの背景を透明化

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

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

このコードを試すことができます。うまくいくと思います。デモにアクセスできます