<

Alpha Transparency in CSS

Posted on
6,214 Points
114 Views
1 Endorsement
Last Modified:
Published
Experience Level: Beginner
3:17
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
0 Comments

Suggested Videos

There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
reCAPTCHA Version 3 was released in 2018, and it works differently to the "I'm not a robot" checkbox in reCAPTCHA version 2. With v3, there's no robot checkbox, but an annoying badge is displayed in the lower right corner of your entire website. Eve…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month