html - 内部のものに影響を与えずに背景の不透明度を 0.7 にする方法は?

Question

2 つの div があります (外側の ID = "BD")(内側の ID = "コンテンツ")。BD の背景色の不透明度を下げようとしていますが、コンテンツ内のすべての画像やテキストも不透明度が低くなります。

どうすればこれを解決できますか?

Answer 1

いくつかのオプションがあります。

1. を使用し:beforeます。これにより、画像の使用が可能になります ( fiddle ):

   #BD {
       position: relative;
   }
   #BD:before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url(http://placehold.it/300);
       opacity: .7;
   }
   

2. rgba古い IE バージョンのグラデーション フィルターを使用します。

   #BD {
       background: rgba(0,0,0,.7);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000');
   }
   

IE グラデーションは、アルファにも 16 進数を使用します。そして、それは最初の 2 桁です。他の回答の1つで16進数からrgbへのコンバーターを使用して、 を実行し255 * opacity、丸め、色の1つに差し込むことでそれを理解できます。