In our front-end design there are two tutorials: CSS3 RGBA Colors Use instructions CSS3 opacity attribute learning and practice, they do not introduce the rgba,rgb,opacity usage, here we put these three attributes together to consider: CSS3 Rgba equals RGB plus opacity?
Please don't answer it first, we'll analyze it next.
In the past we often encounter such a problem, set a div opacity (transparency), the content of this div layer is also followed by transparent, especially text, a transparent to the effect we want is very far away, showing that this is not what we need. I used to be in the wind. This situation usually divides the transparent div and the content originally placed in the middle of the element into two lateral elements, and then by positioning to make the content of the element cover transparent div above, the general problem can still be solved, but also no problem, think, if we have more and less content, then how to do? JS Bar, hehe, is so inefficient things come.
Let's take a look at the things that happened in CSS3.
Rgba,rgb,opacity these three properties are mentioned before, here I repeat, RGBA is to define a color of red-green-blue values and the transparency of this color. RGB defines only the red, green, and blue values of the color, and the opacity defines the transparency of an element. Did you find the point?
Opacity is defined as the transparency of an element , for a Web page, the elements here and a specific "thing", such as a layout element, a diagram element, page RGBA and RGB are defined as the attributes of this element
My understanding is that defining elements and defining element attributes is not the same as the level of the element itself. Two words.
My understanding may be wrong, but take a look at the example below and you'll see
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "Content=" Tex t/html; Charset=utf-8 "/> <title>css3 rgba</title> <style> html,body,h1,h2,p,pre{margin:0;padding:0;} b ody{padding:0 20px;background: #090; color: #000; font:14px/1.6 Arial; H1{FONT-SIZE:26PX} h2{padding:10px 0;font-size:16px;} pre{padding:2px 0;} div{padding:0 20px;border:1px solid #fff; color: #fff;} . grammar{padding:0 20px;border:0 none;font-weight:bold;font-size:16px;} #hex {background-color: #000000;} #rgb {Background-color:rgb (0,0,0);} #rgb-alpha{Background-color:rgb (0,0,0); opacity:.5; } #rgba {Background-color:rgba (0,0,0,.5); Tips{padding:10px;color: #c00;}. notes{padding:2px 10px;background: #eee;} . navigation{padding:10px 0; copyright{padding:10px 0;font-style:italic;font-weight:bold;font-size:14px; </style> </pead> <body> <p>css3 rgba:</p> <p class= "notes" > Browser reference datum: Firefox3.6 and Later, Chrome5 and later, Safari5 and later, Opera10.53 and later, IE series do not reference </p> <p> grammar:</p> <div CLA ss= "Grammar" > Rgba (0-255,0-255,0-255,0-1) </div> <p>hex color black:</p> <div id= "hex" > < Pre><code>background-color: #000000;</code></pre> </div> <p>rgb Black in color: </p > <div id= "RGB" > <pre><code>background-color:rgb (0,0,0);</code></pre> </div > <p>rgb Color +opacity transparency:</p> <div id= "Rgb-alpha" > <pre><code>background-color:rgb (0,0,0); opacity:.5;</code></pre> </div> <p>rgba color:</p> <div id= "Rgba" > <pre> <code>background-color:rgba (0,0,0,.5);</code></pre> </div> </body> </ptml>
Now know CSS3 Rgba equals RGB plus opacity? If you don't understand, then I say: they are not equal!!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
