CSS3でRGBaを使用して透明度を調整する例-CSSチュートリアル-php.cn

CSS3でRGBaを使用して透明度を調整する例

高洛峰

リリース： 2017-03-20 10:45:32

オリジナル

2555 人が閲覧しました

この記事では、 CSS3 で RGBa を使用して透明度を調整するチュートリアルを主に紹介します。RGBA は、RGB カラーモデルの拡張であり、赤、緑、青の 3 つの原色の頭文字を表します。アルファ値は色の透明度を表します。必要な友達はそれを参照できます

CSS3 では、不透明度

属性が追加され、開発者が要素の透明度を設定できるようになりました。最新のブラウザでは、不透明度によって設定された要素が変更され、同時にそのサブ要素も同じ透明度に設定されます。このような透明度のルールは非常に柔軟性が低く、実際の開発では多くの問題を引き起こすことがよくあります。実際、CSS3 には別の色透明ソリューション (RGBa) があります。不透明度と比較すると、RGBa はそのサブ要素に影響を与えることなく単一要素の透明度を設定できますが、RGBa のブラウザサポートは不透明度ほど広範囲ではないため、開発者からはあまり注目されていません。

RGBA(R,G,B,A)

値:
R: 赤の値。正の
整数 | パーセント G: 緑色の値。正の整数 | パーセント
B: 青色の値。正の整数 | パーセント
A: アルファの透明度。値は 0 ～ 1 です。
以下は rgba() を使用して 50% の透明度を設定した白です。

p {   
color: rgba(255, 255, 255, 0.5);   
}

ログイン後にコピー

RGBA は RGB カラーモデルの拡張です。この頭字語は、赤、緑、青の三原色の頭文字を表し、アルファ値は色の透明度/不透明度を表します。

RGBa カラーの詳細な紹介から始めましょう。

1. RGBa カラーベース
RGBa は基本的に、セット要素にアルファチャネルを追加します。つまり、赤、緑、青の 3 つのカラーチャネルに加えて、透明度を表すチャネルが追加されます。値赤、緑、青をそれぞれ表すために 0 ～ 255 の 3 つの整数を使用することに慣れています。アルファ値は 0 ～ 1 (小数点以下 1 桁) です。以下は、その具体的な使用法を示す例です:

CSS 2.1 では、RGB カラー宣言の使用がサポートされています (ただし、開発者は #343434 などの 16 進表現を使用することに慣れているかもしれません)。たとえば、id が例の場合p 要素は背景色 #343434 を設定します。これは次のように記述できます

/* RGB 表示方式 */
#example {background: rgb(52, 52, 52); }

ログイン後にコピー

次に、RGBa を使用して例の背景色を 0.5 の透明度に変更します。

/* 设置 0.5 透明度 */
#example-a {background: rgba(52, 52, 52, 0.5); }   
/* 也可以省略小数点前的 0 */
#example-a {background: rgba(52, 52, 52, .5); }

ログイン後にコピー

透明度を追加する前後の効果は次のとおりです (透明度の効果をより明確に反映するために、例のボディには背景テクスチャが追加されています):

CSS3でRGBaを使用して透明度を調整する例

RGBa はパラメーターを追加しているだけであることがわかります。元の RGB に戻すと、この変更は小さいですが、開発者にとっては非常に便利になります。

さらに、RGBa は、background 属性に加えて、color 属性と b

order 属性でも使用できます (注: RGBa を使用する border 属性は、Firefox では他のブラウザとは若干異なる効果をもたらします)。

2. ブラウザのサポートと進歩的な機能強化
RGBa は主流の最新ブラウザで十分にサポートされており、Webkit の RGBa サポートは最も早いものですが、Chrome は少なくともバージョン 0.415 から RGBa をサポートしていると言えます。さらに、Gecko および Presto カーネルは RGBa のサポートを段階的に実装しており、IE ブラウザは IE9 以降 RGBa のみをサポートしています。より具体的なブラウザのサポートは次のとおりです:

Chrome 0.4.154.33+、Firefox 3.0+、Safari 3.2.1+、Opera 10.10+、IE9+

ブラウザのサポートの詳細については、ここを参照してください。

RGBa をサポートしていないブラウザの場合は、プログレッシブエンハンスメントソリューションを使用して、色保持ソリューションを指定することをお勧めします。まず第一に、開発者は、RGBa をサポートしていないブラウザは、RGBa を使用する CSS プロパティ値を

構文エラーとして扱うため、CSS プロパティの設定を無視することを知っておく必要があります。したがって、開発者は、ブラウザが RGBa をサポートしていない場合に色がまったく表示されない状況を避けるために、RGBa カラーを設定する前に、まず透明度を使用しない属性を設定できます。以下は、上記の例をさらに詳しく説明したものです:

#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); RGBa をサポートしていないブラウザでは、最初の属性を無視する 2 つの背景属性設定は、最初の属性値に従って要素の背景色を設定します。ブラウザ間で効果が同じになることはありませんが、同様の効果が得られ、優れたプログレッシブエンハンスメントソリューションを反映しています。

もちろん、IE の場合は、フィルターを使用して、RGBa をサポートするブラウザーと同じ効果を実現できます。たとえば、上記の例では、次のようにコードを書くことができます

<style type="text/css">   
    #example-a {background: rgba(52, 52, 52, .5); }   
</style>   
<!--[if IE]>   
    <style type="text/css">   
        #example-a {   
            background: transparent;   
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#34343432&#39;, endColorstr=&#39;#34343432&#39;);   
            zoom: 1;   
        }    
    </style>   
<![endif]-->

ログイン後にコピー

ここでフィルターを使用することに注意してください。上の例で使用されているものと同じ色と透明度を 16 進数で表現したものです。

IE 会忽略 RGBa 颜色设置，并且根据 filter 滤镜设置颜色，这样的效果与 RGBa 的效果相同。

三. 不影响子元素
在文章的开头已经介绍过，RGBa 相对 opacity 的优势是不会影响其子元素，即可以单独为被设置的元素设置透明度，而子元素而不受该设置影响。下面再例举一个具体的例子，分别以 RGBa 和 opacity 为元素设置透明度说明两者的区别。

完整代码：

<!DOCTYPE HTML>   
<html lang="zh-CN">   
<head>   
    <meta charset="UTF-8">   
    <title>RGBa 与 opacity 效果的区别</title>   
    <style type="text/css">   
        body {padding-top: 200px; background: url(bg.png); }   
        #example, #example-a {width: 200px; height: 100px; margin: 0 auto; }   
        #example {background: rgb(52, 52, 52); opacity: 0.5; }   
        #example-a {margin-top: 20px; background: rgba(52, 52, 52, .5); }   
        .inside {display: block; width: 50px; height: 50px; margin-left: 10px; background: rgb(100, 140, 180); }   
    </style>   
</head>   
<body>   
    <p id="example">   

        <span class="inside"></span>   

    </p>   

    <p id="example-a">   

        <span class="inside"></span>   

    </p>   
</body>   
</html>

ログイン後にコピー

具体效果
CSS3でRGBaを使用して透明度を調整する例