<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Alpha Transparency in CSS

Posted on
6,159 Points
59 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
0 Comments

Featured Post

Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 287
Introduction to CSS (Part 2) 110
Introduction to jQuery (Part 1) 782
Introduction to PHP: Building the Form 429
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month