☰

CSSを使用して背景を暗くする方法は？質問する

tag-icon • tag-icon html css opacity
CSSを使用して背景を暗くする方法は？質問する

テキストを含む要素があります。不透明度を下げると、全体の不透明度も下がります。background-image他の部分ではなく、その部分だけを暗くする方法はありますか?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

ベストアンサー1

このコードを画像CSSに追加するだけです

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

参照：線形グラデーション() - CSS | MDN

更新: すべてのブラウザがRGBaをサポートしているわけではないので、「フォールバックカラー」を用意する必要があります。この色は、おそらく単色（完全に不透明）になります。例: background:rgb(96, 96, 96)。こちらを参照してください。ブログRGBa ブラウザのサポート。

2023年更新: すべての最新ブラウザがRGBaをサポートするようになりました:caniuse リンク

おすすめ記事