<

Improve company productivity with a Business Account.Sign Up

x

Alpha Transparency in CSS

Posted on
6,157 Points
57 Views
1 Endorsement
Last Modified:
Experience Level: Beginner
3:18
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS

Video Steps

1. Start with a normal styled element, such as a div.

2. Define its "background-color" property as "rgba (255, 255, 255, .5)

3. The numbers in the parentheses symbolize the Red, Green, Blue, and Alpha Transparency values of the color

4. To find the RGB values of a color, you can use Adobe Photoshop in RGB Color mode and use the Color window (Windows > Color)

5. The RGB combination (255, 255, 255) indicates white; (0, 0, 0) would indicate black

6. The Alpha value is for transparency and must be a number from 0 through 1; 0 indicates complete transparency while 1 indicates a completely opaque element so .5 will be 50% transparent

7. Using different numbers for the R, G, and/or B values will result in a colored translucent background

1
Comment
0 Comments

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Join & Write a Comment

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 258
Embedded Audio in HTML5 71
Introduction to HTML (Part 1) 108
Lists and Links 100
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
Next Video:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month