0

私は現在、不透明度と RGBa のどちらを使用するのが最適な CSS プロパティであるかを考えています。より具体的には、有名なBBC ホームページのスライダーに似たものを再現しようとしていますが、なぜ Opacity を使用するのか考えさせられました。

私のバージョンでは、次の 2 つのバージョンのコードを使用しています。

.left-button {
    background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
    background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}

また

.left-button {
    background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
    opacity: 0.4;
}

明らかに、2 番目のものは実際のボタン イメージも不透明にします。そのため、BBC はボタンとボタンの背景マスクを別々に作成したと思います (これは不要な追加マークアップであると私は考えています)。

ただし、RGBa で最初のバージョンを使用したいと思います。なぜ一方が他方よりも優れているのか、また、私が気付いていない互換性の問題があるかどうかを誰かが指摘してくれませんか?

4

2 に答える 2

1

Opacityすべての子アイテムに継承されますが、継承されRGBaません。子アイテムの不透明度が低いかまったくない場合は、RGBaを使用します。

IE8以下はRGBaをサポートしていないため、不透明度のバックアップ計画が必要になる場合があります。

于 2012-12-06T15:55:33.513 に答える
1

どちらも異なることを行うため、どちらが「優れている」というわけではありません。そのため、何を達成しようとしているかによって異なります。

opacity要素全体とそのすべてのコンテンツ (テキスト、インライン画像など) の不透明度を設定します。RGBa特定のレベルのアルファ透明度で色を定義する方法です。

だから、あなたが持っているとしましょうdiv：

<div>Hello!</div>

これにより、全体divとその内容 ("Hello!") が 50% 不透明になります。

div {
    background: #000;
    color: #fff;
    opacity: 0.5;
}

これはdiv50% 不透明の背景だけを作成し、テキストは 100% 不透明な純粋な白のままにします。

div {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
于 2012-12-06T16:05:22.600 に答える