web-dev-qa-db-ja.com

透明なCSS背景色

フォントに影響を与えずに不透明度を使用して、リストメニューを非表示にします。 CSS3で可能ですか？

htmlcssopacitycss-transitions
64
Saranya

ちょっと今、あなたはこのようにCSSプロパティでrgbaを使用することができます

.class{
background:rgba(0,0,0,0.5);
}

0.5はtransparencyで、設計に応じて変更できます。

ライブデモhttp://jsfiddle.net/EeAaB/

詳細情報http://css-tricks.com/rgba-browser-support/

97
Rohit Azad

次の3つのオプションを念頭に置いてください（＃3が必要です）。

1）要素全体が透明です：

visibility: hidden;

2）要素全体がやや透明です：

opacity: 0.0 - 1.0;

3）要素の背景だけが透明です：

background-color: transparent;
35
jordanb

はい、可能です。背景色に rgba-syntax を使用するだけです。

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
12
oezi

この場合、background-color:rgba(0,0,0,0.5);が最善の方法です。例：background-color:rgba(0,0,0,opacity option);

8
dasdasdasdasd

次に、colorsという名前のCSSを使用したクラスの例を示します。

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

これにより、25％の不透明（色付き）と75％の透明な背景が追加されます。

警告あいにく、不透明度は、それがアタッチされている要素entireに影響します。
その要素にテキストがある場合、テキストも25％の不透明度に設定されます。 :-(

そのため、ほとんどの場合、要素のeverythingの透明度に影響を与えずに、rgbaまたはhslaメソッドを使用して背景の透明度を示す必要があります。

青色の背景を75％の透明度に設定する3つの方法を次に示します。

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
6
SherylHohman

これを試して：

   opacity:0;


IE8以前の場合

filter:Alpha(opacity=0);

W3Schoolsの不透明度デモ

4
Vinod