[HTML & CSS General] CSS: div 背景に透過画像をしく（背景以外は透過させない）

opacity を使うと背景以外の div 内包物も透過されてしまう。

[markdown]
こちらをつかうと、スッキリ書ける。

> * [Transparent Background Images | CSS-Tricks](http://css-tricks.com/snippets/css/transparent-background-images/)

Sass mixin にするとこんな書き方でよいだろうか。
背景を `z-index: -1` することによって、その他の内包要素には影響を与えないようにしている。

“`css
@mixin bg-opacity($background, $opacity) {
display: block;
position: relative;
&:after {
content: “”;
background: url($background) repeat-y left top;
opacity: $opacity;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: -1;
}
}
“`

使いたいところでこんな形。

“`css
@include bg-opacity(“/img/menu-bg.png”, 0.7);
“`

ふむふむなるほど。

が、IE 7,8 はダメですね。
（IE 8 … 透過にならない / IE 7 … 画像が表示されない）
コメント欄の情報ではこんな対応状況のよう。

> Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+

分かりやすいサンプルなのに実用できないのか。
CSS はこういうのが多すぎるよな。。。
[/markdown]