Главная » Языки программирования

Transparent Color

Содержание
  1. CSS Color Transparent
  2. How does Transparent color work in CSS?
  3. Examples of CSS Color Transparent
  4. Example #1
  5. Example #2
  6. Example #3
  7. Conclusion
  8. Recommended Articles
  9. What is the HEX code for Transparent color?
  10. HEX code for Transparent color
  11. HEX values for opacity
  12. How is it calculated?
  13. RGBA hexadecimal notations

CSS Color Transparent

CSS Color Transparent

Transparent color in CSS makes background elements visible from another top element of the page. Transparent color can be applied with background-color property and color. If we take the background color as transparent, it makes the backside background elements completely visible. But in real-time, we don’t want that we need semitransparent colors. The rgba value with background color and color property can achieve the semitransparent feature.

Web development, programming languages, Software testing & others

Real-Time Usage: If the client wants their page background color or text color lighter than the actual color or if he wants to look at things from on top of the element, then we used transparent background color and color properties with rgba values.

How does Transparent color work in CSS?

As discussed, transparent color can be applied with background color and color properties.

Below are the given syntaxes,

Background color with transparent value makes background color completely transparent (becomes disappear)

  • Value1: Gives red color between 0 to 255 or 0 to 100%
  • Value2: Gives green color between 0 to 255 or 0 to 100%
  • Value3: Gives blue color between 0 to 255 or 0 to 100%
  • Value4: An alpha parameter that gives transparency between 0 and 1. 0 means fully transparent, and one means fully opaque.
Читайте также:  PHP MySql OOP CRUD Example Tutorial

We can set the background color to red, green, and blue with the required percentage visibility.

Color of text with transparent value makes color completely transparent (becomes disappear).

We can set the color of the text to red, green, and blue colors with the required percentage visibility.

Examples of CSS Color Transparent

Below are the examples for CSS:

Example #1

Background color and color with transparent value:

       
Background color and color properties with transparent value
 
Hi,I am with background color
 
Hi,I am with background color and transparent value
 
Hi,I am with text color
 
Hi,I am with text color and transparent value
  
.topBColor < font-size: 30px; width:500px; background-color: blue; margin:10px; border: 10px double brown; >.tBColor < font-size: 30px; width:500px; background-color: transparent; margin:10px; border: 10px double brown; >.topColor < font-size: 30px; width:500px; color:brown; margin:10px; margin:10px; border: 10px double brown; >.tColor

Output before transparent:

CSS Color transparent -example 1

Output after transparent:

CSS Color transparent -example 1.1

Explanation:

In the above code, the first and 3 rd paragraphs took background and color properties taken without transparency, respectively. So, the final output can’t change these two paragraphs outputs.

Whereas in 2 nd and last paragraphs, the background color and color have been taken with transparency, respectively. So, in the final output, these two paragraphs output changed because the transparent property gives 100% transparency, so the background color in 2 nd paragraph and text in the last paragraph disappears.

Example #2

Background color and color with rgba values:

       
Background color and color properties with RGBA values
 
Hi,I RED am with out transparent background color
 
Hi,I RED am with transparent background color by RGBA color
 
Hi,I RED am without transparent text color
 
Hi,I am with transparent text color by RGBA value
 
Hi,I am GREEN with out transparent background color
 
Hi,I am GREEN with transparent background color by RGBA color
 
Hi,I am GREEN with transparent text color by RGBA value
 
Hi,I am GREEN with transparent tex color by RGBA value
 
Hi,I am GREEN with out transparent background color
 
Hi,I am GREEN with transparent background color by RGBA color
 
Hi,I am GREEN with transparent text color by RGBA value
 
Hi,I am GREEN with transparent tex color by RGBA value
  
.redB < font-size: 30px; width:500px; background-color: red; margin:10px; border: 10px double brown; >.redBCR < font-size: 30px; width:500px; background-color: rgba(255,0,0,0.4); margin:10px; border: 10px double brown; >.redC < font-size: 30px; width:500px; color:red; margin:10px; border: 10px double brown; >.redRC < font-size: 30px; width:500px; color:rgba(255,0,0,0.4);; margin:10px; border: 10px double brown; >.greenB < font-size: 30px; width:500px; background-color: green; margin:10px; border: 10px double brown; >.greenBCR < font-size: 30px; width:500px; background-color: rgba(0,255,0,0.4);; margin:10px; border: 10px double brown; >.greenC < font-size: 30px; width:500px; color:green; margin:10px; border: 10px double brown; >.greenRC < font-size: 30px; width:500px; color:rgba(0,255,0,0.4);; border: 10px double brown; >.blueB < font-size: 30px; width:500px; background-color: blue; margin:10px; border: 10px double brown; >.blueBCR < font-size: 30px; width:500px; background-color: rgba(0,0,255,0.4); margin:10px; border: 10px double brown; >.blueC < font-size: 30px; width:500px; color:brown; margin:10px; border: 10px double brown; >.blueRC

CSS Color transparent -example 2

Example 2.1

Explanation:

In the above example, the background color is without the rgba property value, and the background color is with the rgba property value. In the above example, text color without rgba property value and text color with rgba property value. The above output clearly distinguishes what happens if we apply the rgba value to the background color and color. rgba changes the color in between 0 to 1 value. 0 means fully transparent, and one means fully opaque.

Example #3

Background color with transparent value makes visible background image:

        
First
 
 
Second

Example 3

Explanation:

In the above code, the First header is taken without transparent, so the background portion is not visible, but the Second header is taken with transparent. Hence, the background image portion is completely visible (transparent gives 100% transparency).

Conclusion

Transparent color can be applied with background-color and color properties, and transparency color can also be achieved by rgba property value.

We hope that this EDUCBA information on “CSS Color Transparent” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник

What is the HEX code for Transparent color?

Transparency is a property outside the color itself, and it’s also known as alpha component, You can’t code transparency as pure RGB (Red-Green-Blue), but you can use the RGBA notation, in which you define the color + alpha channel together:

Where alpha defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)

What is the color code for transparent color

The transparency value 0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave you true transparency. Also, note that using RGBA over opacity means that your child elements are not transparent.

If you want «transparent», just set the last number to 0, regardless of the color. All of the following result in «transparent» even though the color part is set to 100% red, green and blue respectively:

color: rgba(255, 0, 0, 0); /* red, transparent */ color: rgba(0, 255, 0, 0); /* blue, transparent */ color: rgba(0, 0, 255, 0); /* green, transparent */

HEX code for Transparent color

There’s also the HEXA notation ( #RRGGBBAA ) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal. It’s called HEXA ( HEX + Alpha ). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA.

Here the FF0000 is the color and 80 is the transparency. Where 80 is the hexadecimal equivalent of 50%.

For the most part, Chrome and Firefox have started supporting this:

Hexadecimal color code for transparency

HEX values for opacity

Following is a correct table of percentages to hex values for opacity. To think in terms of transparency instead, flip the order of the percentages (more opaque = less transparent).

% Hex
100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
0% 00

How is it calculated?

  1. decimal = percentage * 255 / 100 . ex : decimal = 50*255/100 = 127.5
  2. convert decimal to hexadecimal value . ex: 127.5 in decimal = 7*16ˆ1 + 15 = 7F in hexadecimal
  1. convert the hexadecimal value to decimal. ex: D6 = 13*16ˆ1 + 6 = 214
  2. percentage = (value in decimal ) * 100 / 255. ex : 214 *100/255 = 84%

RGBA hexadecimal notations

Источник

Оцените статью
© 2024 Программирование