3

背景だけが透明なメニューを作成するにはどうすればよいですか? テキストは不透明のままにする必要があります (不透明度: 1)

私が設定した場合

li:hover {
    opacity: 0.5
}

リスト項目全体が透明になります。どうすれば修正できますか？

4

4 に答える 4

7

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

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

私はその場でコードを書いたので、うまくいかないかもしれませんが、うまくいくはずです。ただし、これにより、メニューが白っぽくなります。ただし、RGBA について詳しく知りたい場合は、http: //css-tricks.com/rgba-browser-support/にアクセスしてください。

于 2010-08-19T22:46:58.317 に答える
0

できません。透明度レベルはすべての子要素に渡されます。

オプション:

  • 通常の不透明度設定を持つliを使用して、の上に別の要素を配置します。position: absolute

  • アルファ透明度を持つ PNG ファイルを使用して、不透明効果を作成します (IE6 で動作させるには回避策が必要です)。

  • rgba@hatkirby が示すように、ブラウザの不完全なサポートに耐えられる場合は、新しいcolor プロパティを使用してください。

于 2010-08-19T22:47:22.977 に答える
0

の背景には、透明な 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 */
}
于 2010-08-19T22:48:35.833 に答える
0

私はそれが可能だとは思わない、この例を試してみてください: http://jsfiddle.net/578SV/

于 2010-08-19T22:48:48.747 に答える