- Number : specifies the alpha channel value- the opacity\/transparency level. Ranges from 0(zero opacity) to 1(full opacity)<\/li>
- Initial : Sets to default value which is 1 \u2013 full opacity<\/li>
- Inherit : inherit value from parent element<\/li><\/ul>\n\n\n\n
Sample Code To Represent Cross Browser Compatibility Issue In CSS Opacity For Background Color<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <style>\n h1 {\n text-align: center;\n }\n div {\n width: 50%;\n margin: 0 auto;\n background-color: #f1c40f;\n padding: 10px;\n }\n .opacity25 {\n opacity: 0.25;\n }\n .opacity50 {\n opacity: 0.5;\n }\n .opacity75 {\n opacity: 0.75;\n }\n <\/style>\n<\/head>\n<body>\n <h1>CSS OPACITY PROPERTY<\/h1>\n <div class=\"opacity25\">\n <p>opacity 25%<\/p>\n <\/div>\n <div class=\"opacity50\">\n <p>opacity 50%<\/p>\n <\/div>\n <div class=\"opacity75\">\n <p>opacity 75%<\/p>\n <\/div>\n <div>\n <p>opacity 100%<\/p>\n <\/div>\n<\/body>\n<\/html><\/pre>\n\n\n\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/css-opacity-property-1-1024x469.png\")
<\/figure><\/div>\n\n\n\nNote:<\/b> If CSS opacity number is set to a value that is outside the defined range 0 to 1, it is still a valid syntax. The value is rounded to the nearest limit point. For instance, if CSS opacity is set to -0.5 it will be rounded to 0. Similarly, if CSS opacity is set to 1.25, it will be rounded to 1.<\/p>\n\n\n\n
<style>\n.opacity-25{\n opacity: -0.25;\n }\n.opacity125{\n opacity: 1.25;\n }\n<\/style><\/pre>\n\n\n\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/css-opacity-property1.png\")
<\/figure><\/div>\n\n\n\nBrowser Support For CSS Opacity Property<\/h3>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/browser-support-for-css-property-1-1024x281.png\")
<\/figure><\/div>\n\n\n\nCSS3 provides a short single line style rule to add CSS opacity for background color, which is supported by all modern browsers. However, earlier due to cross browser compatibility and feature support issues, making CSS opacity work was quite cumbersome, and required extensive browser specific rules and fallbacks shown below.<\/p>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/pasted-image-0-35-1-1024x565.png\")
<\/figure><\/div>\n\n\n\nTo access my webpage on legacy browsers I have performed browser compatibility testing<\/a> using LambdaTest to ensure that my code renders as intended. LambdaTest is a cross browser testing tool<\/a> offering more than 2000 real browsers and browser versions running on numerous operating systems. For this experiment of CSS opacity for background color, I used live-interactive feature of LambdaTest called Real Time Testing. Real time testing helps you to interact with your webapp across thousands of browser and browser versions by running a virtual machine, hosted on LambdaTest cloud servers.<\/p>\n\n\n\n
I also made use of Lambda Tunnel, which allowed me to test my locally hosted webpages<\/a> on LambdaTest platform by establishing an SSH(Secure Shell) connection.<\/p>\n\n\n\n
Cross Browser Compatible Solution For CSS Opacity<\/h3>\n\n\n\n
If you look at the code below, you will get an idea on how cross browser compatibility for CSS Opacity was utilized in earlier days.<\/p>\n\n\n\n
div{\n\/* IE 8 *\/ \n-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";\n \n \/* IE 5, IE6 and IE7 *\/ \nfilter: alpha(opacity=50); \n \n\/* Netscape *\/ \n-moz-opacity: 0.5;\n \n \/* Safari 1.x Pre webkit *\/ \n-khtml-opacity: 0.5; \n \n\/* Modern browsers *\/\nopacity: 0.5; \n}<\/pre>\n\n\n\nBut it is quite evident that this is not a practical solution for modern use. Today, there is a short modern hack for making CSS opacity work for all browsers including legacy versions of Internet Explorer \u2013 IE6-IE8.<\/p>\n\n\n\n
div {\n opacity: 1;\n filter: alpha(opacity=100); \/* IE8 and lower *\/\n zoom: 1; \/* Triggers \"hasLayout\" in IE 7 and lower *\/\n}<\/pre>\n\n\n\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/pasted-image-0-36-1024x587.png\")
<\/figure><\/div>\n\n\n\nThe code mentioned above will not work in IE, specially in IE8 if \u2018zoom :1\u2019 is not specified. IE doesn\u2019t apply several CSS style rules to elements that don\u2019t have layout. \u2018zoom:1\u2019 or \u2018width :100%\u2019 will trigger \u2013 \u201chas layout\u201d for the element and enable CSS opacity for background color or images to be applied.<\/p>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/JPG.png\")
<\/figure><\/div>\n\n\n\nOpacity Polyfill For Internet Explorer (IE6 \u2013 IE8)<\/h3>\n\n\n\n
The final solution in our quiver for fixing cross browser compatibility issue with CSS opacity for background and images, is a small polyfill<\/a> which adds support to older IE versions IE6, IE7 and IE8. Using this polyfill eliminates need to worry about vendor prefixes or fallbacks as far as IE legacy browsers are concerned. However, note that this polyfill will not work for inline CSS style rules.<\/p>\n\n\n\n
USAGE \u2013 <\/b>
Use IE conditional statement to load polyfill JS file in Internet Explorer IE8, IE7 and IE6.<\/p>\n\n\n\n<!--[if lte IE 8]> <script src=\"jquery.ie-opacity-polyfill.js\"><\/script> <![endif]--><\/pre>\n\n\n\n
This will not be interpreted by any modern browsers and will be simply discarded as a comment. If you want to learn more about IE conditional statements and CSS feature queries, check out my article here<\/a>.<\/p>\n\n\n\n
<!doctype html>\n<html>\n \n<head>\n <meta charset=\"utf-8\">\n <title>CSS Opacity Polyfill for IE<\/title>\n <!--[if lte IE 8]><script src=\"jquery.ie-opacity-polyfill.js\"><\/script><![endif]-->\n <style type=\"text\/css\">\n .square {\n float: left;\n width: 90px;\n height: 90px;\n padding: 5px;\n margin: 25px;\n background: #000;\n color: #fff;\n }\n .opacity75 {\n opacity: .75;\n }\n .opacity50 {\n opacity: .5;\n }\n .opacity25 {\n opacity: .25;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"square\">Opacity: 100%<\/div>\n <div class=\"square opacity75\">Opacity: 75%<\/div>\n <div class=\"square opacity50\">Opacity: 50%<\/div>\n <div class=\"square opacity25\">Opacity: 25%<\/div>\n<\/body>\n<\/html><\/pre>\n\n\n\nCSS offers another alternative to CSS opacity to achieve a similar kind of opacity or transparency effect by the use of RGBA color. This is quite popular for creating overlay backgrounds, gradient backgrounds, text and box shadow, gradient text etc.<\/p>\n\n\n\n
RGBA Color<\/h2>\n\n\n\n
One fundamental problem with CSS Opacity property is that if specified for a parent element, it affects all children element as well. If you set background of a div element to transparent, then all children elements (like text and images) of the parent div will also be set to transparent. This is where RGBA color comes to our rescue. The RGBA color value is similar to RGB but with an alpha channel which specifies opacity or conversely transparency value for an element but leaves its children untouched.<\/p>\n\n\n\n
Syntax Of Using RGBA For Opacity<\/h3>\n\n\n\n
rgba(R,B,G,alpha-channel)<\/p>\n\n\n\n
- R\/B\/G: Specifies the value or intensity of Red, Blue and green colors respectively either by an integer value ranging from 0 to 255 or % value ranging from 0-100%.<\/li>
- Alpha-channel : species the opacity value as a range between 0 and 1. 0 represents 0% opacity(or 100% transparency) and 1 represents 100% opacity(or 0% transparency).<\/li><\/ul>\n\n\n\n
Sample Code To Represent Cross Browser Compatibility Issue In RGBA Opacity For Background Color<\/h3>\n\n\n\n
You can refer to our LambdaTest Experiment on RGBA Opacity background color<\/a> property. Below is the code sample used for the cross browser compatibility experiment on RGBA Opacity.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <style>\n h1 {\n text-align: center;\n }\n div {\n width: 50%;\n margin: 0 auto;\n padding: 10px;\n }\n .opacity0{\n background: rgba(46, 204, 113,0);\n }\n .opacity25{\n background: rgba(46, 204, 113,0.25);\n }\n .opacity50{\n background: rgba(46, 204, 113,0.5);\n }\n .opacity75{\n background: rgba(46, 204, 113,0.75);\n }\n .opacity100{\n background: rgba(46, 204, 113,1.0);\n }\n \n <\/style>\n<\/head>\n<body>\n <h1>RGBA COLOR<\/h1>\n <div class=\"opacity0\">\n <p>opacity 0%<\/p>\n <\/div>\n <div class=\"opacity25\">\n <p>opacity 25%<\/p>\n <\/div>\n <div class=\"opacity50\">\n <p>opacity 50%<\/p>\n <\/div>\n <div class=\"opacity75\">\n <p>opacity 75%<\/p>\n <\/div>\n <div class=\"opacity100\">\n <p>opacity 75%<\/p>\n <\/div>\n<\/body>\n<\/html><\/pre>\n\n\n\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/RGBA-color.png\")
<\/figure><\/div>\n\n\n\nBrowser Support Of RGBA Color Type<\/h3>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/image2-6-1024x322.png\")
<\/figure><\/div>\n\n\n\nAlthough RGBA color enjoys excellent support across all major browsers and is largely cross browser compatible. However noticeable exceptions are IE6 \u2013 IE8 which do not support this feature. One solution is to use a fallback solid color(100% opacity) without any alpha value, ie without any opacity\/transparency value. Browsers which do not comprehend RGBA value will render the fallback color. However we will explore ways to make RGBA cross browser compatible and work in IE6-IE8 versions as well. <\/p>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/pasted-image-0-37-1-1024x546.png\")
<\/figure><\/div>\n\n\n\nCross Browser Compatible Solution Of Using RGBA For Opacity<\/h3>\n\n\n\n
Microsoft Internet explorer (IE6-IE8) had its own own gradient and filter properties which is slightly different to RGBA. It rather uses 8-character HEX value called \u2018ARGB\u2019 (alpha RGB) to define colors with a transparency value. Unlike traditional RGBA which is 4 character long, R,G,B values ranges from 0-255 and alpha channel value ranging from 0-1, #ARGB has a hexadecimal format with first 2 \u2013 #AARRGGBB. First 2 characters specify the alpha value and control the opacity(00-FF) while last 6 characters specify the red, blue and green color intensity respectively.<\/p>\n\n\n\n
Here\u2019s a table showing alpha value in % and its corresponding alpha value in #ARGB format \u2013 If you have RGBA value \u2013 rgba(F,0,0,0.5), then the corresponding value in #ARGB format will be #80FF0000 where first 2 characters \u201880\u2019 represent 0.5 or 50% opacity.<\/p>\n\n\n\n
![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/pasted-image-0-38-1024x542.png\")
<\/figure><\/div>\n\n\n\n![\"CSS](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/03\/Adword-Cyber.jpg\")
<\/figure><\/div>\n\n\n\n