In the examples below, we used 0.2, 0.5, and 1.0 to give a side-by-side comparison:<\/p>\n
![\"straws-transparent\"](\"http:\/\/www.cssnewbie.com\/wp-content\/uploads\/2017\/07\/straws-transparent.jpg\")
<\/p>\n
img {\r\n\r\nopacity: 0.5;\r\n\r\nfilter: alpha(opacity=50); \/* For IE8 and earlier *\/\r\n\r\n}<\/pre>\nNote: We used the filter<\/strong> property because versions of Internet Explorer 8 and below don\u2019t yet recognize the opacity<\/strong> property.<\/p>\nTransparent Boxes and Tables<\/h1>\n
You can use the opacity<\/strong> property to add transparency to an element, including the background and all its child elements. For example, in the boxes below (using <div><\/strong>, not <table><\/strong> and its sub-elements), all the text becomes transparent as well.<\/p>\n![\"box-opacity\"](\"http:\/\/www.cssnewbie.com\/wp-content\/uploads\/2017\/07\/box-opacity.jpg\")
\nSee how the text\u2019s opacity also fades? If this is exactly what you want to happen, there\u2019s no need to modify anything else. You can use the code below to achieve this effect:<\/p>\n
div {\r\n\r\nopacity: 0.3;\r\n\r\nfilter: alpha(opacity=30); \/* For IE8 and earlier *\/\r\n\r\n}<\/pre>\nTransparency Using RGBA<\/h1>\n
However, if you want only the background to change, while the text or other child elements would remain opaque, there is a way around it using RGBA. If you\u2019re used to hex codes, you can learn about the other ways to define colors in CSS<\/a>, namely predefined, RGB\/RGBA, and HSL\/HSLA colors.<\/p>\nRGBA stands for red green blue alpha, with the alpha parameter specifying the opacity for the RGB color. So, using RGBA color values, we can set the opacity for the background, while the text remains black:<\/p>\n
![\"box-rgba\"](\"http:\/\/www.cssnewbie.com\/wp-content\/uploads\/2017\/07\/box-rgba.jpg\")
\nIn the above example, we used the RGB value 171, 205, 239<\/strong>, and then the alpha<\/strong> parameter defines how opaque or transparent it is. For example:<\/p>\ndiv {\r\n\r\nbackground: rgba(171, 205, 239, 0.3) \/* Blue background with 30% opacity *\/\r\n\r\n}<\/pre>\nOpaque Text in a Transparent Box<\/h2>\n
Another really cool thing you can do with opacity and transparency is add text in a transparent box, probably to offset a really harsh or dark background image like in our example below.<\/p>\n
![\"box-transparent\"](\"http:\/\/www.cssnewbie.com\/wp-content\/uploads\/2017\/07\/box-transparent.jpg\")
\nTo create this simple yet effective style, use the <div><\/strong> element and name their classes as “background”<\/strong> and “transbox”<\/strong>. The first class is the background image and border<\/a>, while the second class is a separate background color and border. Lastly, use a paragraph to add text.<\/p>\nFirst, we create a <div> element (class=”background”) with a background image, and a border. Then we create another <div> (class=”transbox”) inside the first <div>. The <div> element has a background color, and a border – the div is transparent. Inside the transparent <div>, we add some text inside a <p> element.<\/p>\n
Here is the code we used, which you can modify and experiment with using your own image and text:<\/p>\n
<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\ndiv.background {\r\n\r\nbackground: url(green-tile.jpg) repeat;\r\n\r\nborder: 2px solid black;\r\n\r\n}\r\n\r\ndiv.transbox {\r\n\r\nmargin: 30px;\r\n\r\nbackground-color: #ffffff;\r\n\r\nborder: 1px solid black;\r\n\r\nopacity: 0.6;\r\n\r\nfilter: alpha(opacity=60); \/* For IE8 and earlier *\/\r\n\r\n}\r\n\r\ndiv.transbox p {\r\n\r\nmargin: 5%;\r\n\r\nfont-weight: bold;\r\n\r\nfont-family: Verdana;\r\n\r\nfont-size: 12px;\r\n\r\ncolor: #000000;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div>\r\n\r\n<div>\r\n\r\n<p>This is sample text placed in a transparent box.<\/p>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\nConclusion<\/h2>\n
There are many possible uses for opacity and transparency, whether it\u2019s purely for aesthetic or for emphasizing\/deemphasizing elements on your web page. It\u2019s certainly a cheaper alternative to relying on Photoshop or another photo editing software to do all of this for you!<\/p>\n