Beispiel für die Verwendung von RGBa zum Anpassen der Transparenz in CSS3

Dieser Artikel stellt hauptsächlich ein Tutorial zur Verwendung von RGBa zum Anpassen der Transparenz in CSS3 vor. RGBA ist eine Erweiterung des RGB-Farbmodells Buchstaben und Alpha-Werte stellen die Transparenz oder Deckkraft einer Farbe dar. In CSS3 wurde ein Deckkraft-Attribut

hinzugefügt , wodurch Entwickler die Transparenz von Elementen festlegen können, die von gängigen modernen Browsern unterstützt werden, aber die Transparenz setzt das festgelegte Element und seine Unterelemente gleichzeitig auf dieselbe Transparenz und verursacht häufig Probleme viel Ärger in der tatsächlichen Entwicklung. Tatsächlich gibt es in CSS3 eine weitere Farbtransparenzlösung – RGBa. Im Vergleich zur Opazität kann RGBa die Transparenz für ein einzelnes Element festlegen, ohne dessen Unterelemente zu beeinträchtigen. Allerdings ist die Browserunterstützung von RGBa nicht so umfangreich wie die Opazität und hat daher bei Entwicklern relativ wenig Aufmerksamkeit erregt.

RGBA(R,G,B,A)Wert:

R: Rotwert. Positiv

Ganzzahl
|. Prozent
G: Grüner Wert. Positive ganze Zahl |. ProzentB: Blauer Wert. Positive ganze Zahl |. Prozent A: Alpha-Transparenz. Der Wert liegt zwischen 0 und 1.
Das Folgende ist Weiß mit rgba(), um 50 % Transparenz festzulegen.



RGBA ist eine Erweiterung des RGB-Farbmodells. Dieses Akronym steht für die Anfangsbuchstaben der drei Grundfarben Rot, Grün und Blau und der Alpha-Wert stellt die Transparenz/Opazität der Farbe dar.

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

Das Folgende ist eine detaillierte Einführung in RGBa-Farben.

1. RGBa-Farbbasis

RGBa fügt im Wesentlichen einen Alphakanal zu den festgelegten Elementen hinzu, dh zusätzlich zu den drei Farbkanälen Rot, Grün und Blau Kanal, der Transparenz darstellt, bei dem der RGB-Wert die bekannten drei ganzen Zahlen von 0 bis 255 verwendet, um Rot, Grün bzw. Blau darzustellen, während der Alpha-Wert zwischen 0 und 1 liegt (eine Dezimalstelle). Das Folgende ist ein Beispiel, um seine spezifische Verwendung zu veranschaulichen:
In CSS 2.1 wird die Verwendung von RGB-Farbdeklarationen unterstützt (obwohl Entwickler möglicherweise eher daran gewöhnt sind, hexadezimale Darstellungen wie #343434 zu verwenden), zum Beispiel „Einstellen“. Um die Hintergrundfarbe #343434 für das p-Element mit der ID des Beispiels zu ändern, können Sie

schreiben und dann RGBa verwenden, um die Hintergrundfarbe im Beispiel so zu ändern, dass sie eine Transparenz von 0,5 hat.

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

Die Effekte vor und nach dem Hinzufügen von Transparenz sind wie folgt (um den Effekt der Transparenz deutlicher darzustellen, wurde dem Körper im Beispiel eine Hintergrundtextur hinzugefügt):

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

Sie können sehen, dass RGBa nur einen Parameter zum ursprünglichen RGB hinzufügt. Obwohl diese Änderung gering ist, bietet sie Entwicklern großen Komfort.

Zusätzlich zum Hintergrundattribut kann RGBa auch in den Farb- und Bord-Attributen verwendet werden (Hinweis: Die Verwendung von RGBa für das Randattribut in Firefox unterscheidet sich von dass in anderen Browsern der Effekt etwas anders ist).

2. Browser-Unterstützung und progressive VerbesserungObwohl RGBa in gängigen modernen Browsern gute Unterstützung erhalten hat, ist die Unterstützung von Webkit für RGBa die früheste,

Chr

ome In dieser Hinsicht kann man sagen, dass Chrome seit Version 0.415 sehr leistungsfähig ist. Darüber hinaus haben Gecko- und Presto-Kernel die Unterstützung für RGBa erst seit IE9 implementiert. Eine spezifischere Browserunterstützung ist wie folgt:
Chrome 0.4.154.33+, Firefox 3.0+, Safari 3.2.1+, Opera 10.10+, IE9+Eine detailliertere Browserunterstützung finden Sie hier .

Für Browser, die RGBa nicht unterstützen, kann eine progressive Verbesserungslösung verwendet werden, die eine reservierte Farbe angibt. Zunächst müssen Entwickler wissen, dass Browser, die RGBa nicht unterstützen, CSS-Eigenschaftswerte, die RGBa verwenden, als

Syntaxfehler

behandeln und daher die CSS-Eigenschaftseinstellung ignorieren. Daher können Entwickler zunächst ein Attribut festlegen, das keine Transparenz verwendet, bevor sie die RGBa-Farbe festlegen, um zu vermeiden, dass überhaupt keine Farbe vorhanden ist, wenn der Browser RGBa nicht unterstützt. Das Folgende ist eine erweiterte Erklärung des obigen Beispiels:

#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); Unterstützt RGBa nicht. Der Browser ignoriert die Einstellung des zweiten Hintergrundattributs und stellt die Hintergrundfarbe des Elements entsprechend dem ersten Attributwert ein. Obwohl der Effekt zwischen den Browsern nicht gleich sein kann, wurde ein ähnlicher Effekt erzielt und spiegelt eine gute progressive Verbesserungslösung wider .

Natürlich können Sie für IE Filter verwenden, um den gleichen Effekt zu erzielen wie in Browsern, die RGBa unterstützen. Zum Beispiel können Sie den Code wie folgt schreiben

Beachten Sie hier, dass der Filter dieselbe Farbe und Transparenz wie im obigen Beispiel verwendet, jedoch eine hexadezimale Darstellung verwendet.

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>

具体效果

可以看出，opacity 会使其中的子元素 span 同时变为半透明的效果，而 RGBa 则只改变被设置的元素的透明度，而在大多数情况下，开发者只需要设置当前元素的透明度（如遮罩，半透明背景等），因此使用 RGBa 会更加的灵活。

另外，在 IE9 中，直接使用 RGBa 颜色与使用 opacity 设置透明的效果会有差异（读者可以在 IE9 下浏览 Demo 查看具体的效果），开发者需要注意这一点差异。

相关文章：

CSS设定一个元素半透明

CSS3教程(8):CSS3透明度指南

实现CSS3不透明度完整代码

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von RGBa zum Anpassen der Transparenz in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!