メニューに不透明度を設定しますが、CSSでテキスト不透明を保持します

Question

その背景だけが透明なメニューを作成するにはどうすればよいですか？テキストは不透明を保つ必要があります（不透明：1）

設定した場合

li:hover {
    opacity: 0.5
}

リスト全体が透明になります。それを修正するにはどうすればよいですか？

Answer 1

「RGBA」と呼ばれるCSS3には、透明な色を背景色として使用できる新しい値があります。例えば：

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

私はそれがうまくいくはずだと確信していますが、私はその場でコードを書いたので、そうではないかもしれません。ただし、これにより、メニューに白っぽい色合いが与えられます。ただし、RGBAの詳細を読みたい場合は、こちらをご覧ください。 http://css-tricks.com/rgba-browser-support/

Answer 2

透明なPNG画像または rgba 色値, 、 のために <li>の背景、例：

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

または：

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

Answer 3

私はそれが可能だと思います、この例を試してください： http://jsfiddle.net/578sv/

Answer 4

できません。透明性レベルは、すべての子供の要素に伝えられます。

あなたのオプション：

• その上に別の要素を置きます li, 、おそらく使用 position: absolute, 、それは通常の不透明な設定を持っています

• アルファ透明性を備えたPNGファイルを使用して、不透明な効果を作成します（IE6で動作するために回避策が必要です）

• 新しいものを使用します rgba @hatkirbyが示すように、カラープロパティ、不完全なブラウザのサポートで暮らすことができれば