,

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

公開日: 2014/06/30
更新日: 2018/11/15

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

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

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

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

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

@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 はこういうのが多すぎるよな。。。