From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Working with opacity

Working with opacity - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Working with opacity

Needing to control an element's opacity is a common occurrence in page layout. In CSS we have two primary means of controlling transparency: the opacity property and using the RGBA or HSLA color declarations. So I am going to be working with the opacity.htm file, which is found in the 08_05 directory. Just to give you a heads-up on the structure of the page, if we scroll down, after some descriptive text, we have a section that has three different div tags in it, and they have a class of opacity, alpha, and background. If I just preview that in the browser, you can see what's happening. The div with the background has the image in beside it, and we have a div tag on the left-hand side that we are going to use the opacity property for. Then we have a dig tag on the right- hand side that we are going to use alpha transparency for. Okay. So if I go up into my code, I can see I already have some selectors for those two elements, so we are just going to start adding properties directly to…

Contents