Example output of 30% opacity:
Thank you for subscribing.
Although both opacity and rgba work for the same transparency concept, designers often get confused about choosing one among the two!
What is Opacity?
Something went wrong.
How does it work?
Sample HTML code for the above output:
|
.content–opacity{
background–color: rgb(0,0,0);
opacity: 0.3;
border: 10px solid #2d21ed;
|
Opacity and rgba() are not only the main elements for setting transparency on any element but also the most confusing one for the web designers. I’ve come up with an easy comparison guide of opacity vs RGBA for you to understand the difference.
That’s all!
What is RGBa()?
Never miss Magento tips, tricks, tutorials, and news.
I would be happy to help.
How does it work?
Check out the example for rgba() that specifies RGB value as 0 that means black and alpha value as 0.3.
|
.content–rgba {
background–color: rgba(0,0,0,0.3);
border: 10px solid #2d21ed;
|
The primary difference is, the opacity applies to its sub-elements too. In contrast, rgba() applies the transparency of the colour to that particular element only.
Easy to understand, right?
Opacity vs RGBA
Example output of 30% alpha:
Thank You.
‘A’ stands for alpha in rgba() which defines the opacity as a number between 0.0 and 1.0. Here, 0.0 identifies ‘fully transparent’ and 1.0 is for ‘fully opaque’.
The opacity is a property which specifies the transparency level of a particular element through CSS. The requirement for opacity value varies between 0 and 1.
For instance, to achieve 30% transparency for the particular element, we need to set the alpha value as 0.3.
|
<div class=“main-container”>
<div class=“sub-container”>
<div class=“content-rgba”>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry‘s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
<div class=”content-opacity”>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
|
CSS provides a number of properties for various page layout designs, adjust colours and fonts, add effects to images, etc. The important aspect of any web design is to set the most pleasing colour layouts. Especially, transparent colour is the most useful and unique property in CSS that makes background elements visible from another page’s top element. We can apply transparent colours on any element.
|
.content-rgba {
padding: 20px;
border: 5px solid #2d29ed;
letter-spacing: 1.5px;
background-color: rgba(256, 0, 0, 0.5);
.content-opacity {
padding: 20px;
border: 5px solid #2d29ed;
margin-top: 20px;
background-color: rgb(256, 0, 0);
opacity: 0.5;
letter-spacing: 1.5px;
|
As I mentioned, basically both are not the same thing. Hence, it always depends on one’s requirement of the opacity level. It is recommended to use rgba as it provides functionality to apply opacity based on the single element, but if one needs to apply transparency on child elements also then in that scenario, use the opacity property.
Which one is better: Opacity or rgba?
The rgba() defines colours using the red-green-blue-alpha value.
Feel free to share the post with Magento Community via social media.
For example, opacity is set to the div element that contains text and has a border. Then, the opacity of a colour element will be applied to border colour, text colour as well as the background colour. On the other hand, the rgba() affects transparency only for a single declaration as mentioned below.
If you have any question regarding the difference of opacity vs RGBa, do mention them in the Comments section below.
The RGB specifies the intensity of the red, green and blue colours between 0 and 255, or as a percentage value between 0% and 100%.
For instance, to achieve 30% transparency for the particular element, we need to set the opacity value as 0.3.
Check out the example for opacity that applies opacity in the class of black coloured div which contains the text.
Sample CSS Code:
CSS, i.e., Cascading Style Sheet, is the fundamental part of the modern web development process that adds the design flexibility and interactivity to the web development.
Get Weekly Updates
Though both elements are used for the transparency of an element, there is some basic but important difference between rgba and opacity that makes them work differently.
In the opacity property, transparency is applied to every sub child of a parent element like border, and text. In contrast, rgba is only applied to the div.
/**/
/*.mfp-bg{background:#000000d4}
/*]]>*/
/*.mfp-bg.mfp-ready{opacity:.6}
/*]]>*/
