March 1Mar 1 Administrators CSS Opacity CSS Image Opacity The opacity property specifies the opacity/transparency of an element. The opacity property can take a value from 0.0 - 1.0: 0.0 - The element will be completely transparent 0.5 - The element will be 50% transparent 1.0 - Default. The element will be fully opaque opacity 0.2 opacity 0.5 opacity 1.0(default) Example img { opacity: 0.5;} Try it Yourself » Opacity and :hover The opacity property is often used with :hover to change the opacity on mouse-over: Example img { opacity: 0.5;}img:hover { opacity: 1.0;} Try it Yourself » Reversed Hover Effect Here is an example of reversed hover effect: Example img:hover { opacity: 0.5;} Try it Yourself » Transparent Boxes When using the opacity property to add transparency to the background of an element, all child elements inherit the same transparency. This can make the text inside a transparent element hard to read: opacity 1 opacity 0.6 opacity 0.3 opacity 0.1 Example div { opacity: 0.3;} Try it Yourself » Transparency using background-color To NOT apply the transparency to child elements, you can use the background-color property with an RGBA value. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). Where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Tip: You will learn more about RGBA Colors in our CSS Colors Chapter. The following example sets the opacity for the background color and not the text: 100% opacity 60% opacity 30% opacity 10% opacity Example div { background: rgba(4, 170, 109, 0.3) /* Green background with 30% opacity */} Try it Yourself » Text in Transparent Box This is some text that is placed in the transparent box. Example <html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: rgba(255, 255, 255, 0.6); border: 1px solid black; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box.</p> </div> </div> </body> </html> Try it Yourself » Example explained Create a <div> element (class="background") with a background image, and a border. Create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a 0.6 transparent background color, and a border. Inside the transparent <div>, we add some text inside a <p> element. CSS Property Property Description opacity Sets the opacity level for an element ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.