WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
CSS Opacity and Transparency - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <title>CSS Opacity and Transparency</title> <meta charset="UTF-8"> </head> <body> <h1>CSS Opacity</h1> <div class="opacity"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="child"> <img src="web-design.jpg" width="100%"> </div> </div> <style> .opacity{ width: 100%; display: table; background: #000; color: #fff; padding: 15px; box-sizing: border-box; opacity: 0.2; } .child{ width: 48%; float: left; } .child:last-child{ float: right; } </style> <h2>Transparency using RGBA</h2> <div class="transparency"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="child"> <img src="web-design.jpg" width="100%"> </div> </div> <style> .transparency{ width: 100%; display: table; background: rgba(0,0,0,0.2); color: #fff; padding: 15px; box-sizing: border-box; } .child{ width: 48%; float: left; } .child:last-child{ float: right; } </style> </body> </html>
CSS Code
/* Write your CSS here */
Run Code