0

以下のことができるかどうか疑問に思っています。この例http://jsfiddle.net/huhu/r7kSf/を見ると、左側のアイコンのみを不透明度でターゲットにできますか? opacity:0.5;通常の状態でホバーして完全に不透明にするにはどうすればよいですか？色を使用する場合はアルファ係数を使用した方が簡単なのは知っていますが、画像だけではどうでしょうか? オプションは、2 つの異なるアイコンを使用することができます。ホバーの下で代替バージョンをロードしますか? スプライトなどでない限り、多くのhttpリクエストがあるため、それは良い考えではないと思います..

どうも

4

4 に答える 4

2

はい、CSS3 のrgba背景を使用します。たとえば、#F7F8BD不透明度が 50%の場合rgba(247,248,189,0.5);、互換性はまだ 100% ではないことに注意してください。次のように使用します。

background: #F7F8BD; /* Browsers that don't support RGBa */
rgba(247,248,189,0.5); /* CSS3 */

詳細については、 http://css-tricks.com/rgba-browser-support/を参照してください。

于 2013-01-20T21:26:39.693 に答える
1

それ以外の

opacity:0.5

使用する：

background-color:rgba(0,0,0,0.5);

ここで、最初の3つの数値は赤、緑、青の値であり、最後の数値はアルファ値であり、背景に透明性を与えます。

于 2013-01-20T21:28:49.590 に答える
1

私が質問を理解しているなら、いいえ-弾丸の画像に不透明度を適用することはできませんが、全体に適用することはできませんli。

最善のオプションは、画像を背景としてspan：に配置することです。

<li><span class="bg"></span> Text</li>

そして不透明度をに適用しますspan

于 2013-01-20T21:30:49.777 に答える
1

:before可能ですが、いくつかのトリッキーな CSS3 ハッキングが必要です。基本的には、疑似要素を使用して各アイテムの前に新しいインライン ブロック要素を作成し、そのような要素の不透明度を調整します。また、背景画像を<li>要素自体に割り当てる:before代わりに、疑似要素に割り当てます。

#mainFeatures li:before {
    content: '\0000a0';
    display: inline-block;
    opacity: 0.5;
    width: 30px;
}

#mainFeatures li#[insert element ID here]:before { 
    background:url([image url]) no-repeat 0 5px;
}

私はあなたのフィドルを変更してフォークしました-チェックしてください:) http://jsfiddle.net/teddyrised/QBGWf/1/

于 2013-01-21T00:54:16.967 に答える