Прозрачность фона css hex

Set Transparency With Hex Code in HTML

1. Use the CSS Hexcode to Provide Transparency to the Background in HTML
2. Use the CSS opacity Property to Make the Background Transparent in HTML
3. Use the CSS background Property to Make the Background Transparent in HTML

This article will introduce methods to add transparency to HTML elements. We will use CSS to add transparency.

Use the CSS Hexcode to Provide Transparency to the Background in HTML

We can use the CSS hex code to provide transparency to an HTML element. We can set the hex code as the background property’s value. The hex code that we will be using is eight digits. The format of the eight-digit hex code is #RRGGBBAA . The first six digits represent the hex code for red, green, and blue, respectively. The last two digits are the hex code for opacity.

For example, create a div and write some text in it. In CSS, select the div and set the background property to #00ff0080 . The hex code #00ff00 represents the green color, and 80 represents the opacity of the color. This will create a green background in the text and give the opacity of 50% or the value 128 . The binary equivalent of the hexadecimal value 80 is 128. Thus, we can use hex code to create a transparent element in HTML.

div class="light">This is some textdiv> 

div   background: #00ff0080; > 

Use the CSS opacity Property to Make the Background Transparent in HTML

We can create a transparent background using the opacity property in CSS. We can use this property on any elements in HTML and can make the background transparent. The opacity property sets the opacity of an element. It is responsible for setting the degree to which the content behind an element is hidden. The value ranges from 0.0 to 0.9 . The lower values resemble the lowest level of opacity and vice versa. It means that when the opacity value is near to 0.0 , the content behind the element is more visible. And the content seems more transparent. We can also use the % representation to set the opacity. It ranges from 0% to 100% .

For example, create a div with the class bg . Write some text as an element between the div . In CSS, select the div element and set the background to yellow using the background-color property. Then, select the bg class using the class selector. Next, set the opacity to the value of 0.5 .

The example below creates a background color of yellow, and there is some text written in it. The 0.5 opacity value adds some amount of transparency to the element. We can change the value from 0.0 to 1.0 to test the degree of opacity in the following example. Thus, we added transparency to the background color in the tutorial.

div class="bg">This is some textdiv> 

div   background-color: yellow; >  .bg   opacity: 0.5; > 

Use the CSS background Property to Make the Background Transparent in HTML

There is a drawback to using the opacity property. The opacity value set in the parent element applies to all the children elements. To get rid of this problem, we can use the CSS background property. We can specify the rgba value to the element and prevent it from applying opacity to child elements. The background property uses the rgba() function to specify the RGB colors with their opacity. The syntax of the function is shown below.

We can specify the intensity of the RGB values in the range of 0 to 255 . We can also represent the percentage value in the range of 0% to 100% . We can specify the value of alpha as we discussed in the first method.

Make some CSS changes to the code example of the first method. In the selection of div , remove the background-color property and add the background property. Write the rgba() function as the value of the property. Set the value of red as 255 and set 0 for green and blue. Write the alpha value as 0.2 . Then, remove the bg class selection.

The code snippets below will create a red background in the text and adds a degree of transparency.

div class="light">This is some textdiv> 

div   background:rgba(255,0,0, 0.2) > 

Источник

How To Use CSS Hex Code Colors with Alpha Values

In CSS, there are several formats for colors that can be used. Common ones include hex (hexadecimal) codes, RGB (red, green, blue), RGBA (red, green, blue, alpha), and HSL (hue, saturation, lightness).

In this article, you will review hex color codes and explore using alpha values for transparency.

Prerequisites

If you would like to follow along with this article, you will need:

• Some familiarity with CSS is required. You may benefit from How To Build a Website With CSS tutorial series if you need a refresher.
• A modern web browser that supports #rrggbbaa hex color notation.

Using Color Keywords

First, CSS supports color keywords. Most browsers and devices can render these named colors into color values.

There are about 140 named colors in CSS (like red , blue , lavender , etc.).

For example, if you wanted your text to have red color, you could use the keyword red :

Different value formats, like hex codes, will allow you to customize beyond 140 colors.

Understanding Hexadecimal Values

You are probably most used to counting with decimal values (or base 10):

In others words, a single-digit only has 10 possible values ( 0 to 9 ), and after that, it must increase to two digits ( 10 ).

Hexadecimal values are base 16 instead of base 10:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 

It uses the letters A , B , C , D , E , and F to represent the additional values.

For example, these are all valid hexadecimal values:

Next, learn how to use hexadecimal values in CSS styles.

Using Hexadecimal Values in CSS

When styling an element with CSS, you will often be changing the color values for properties like font color , background-color , border-color , etc.

To create custom colors, you can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

CSS hex codes must begin with a “number sign” (#) (also known as a pound sign or a hash symbol). Then, six digits of hexadecimal values. Each pair of two digits represents red, green, and blue. The pattern looks like #RRGGBB (where red is R , green is G , and blue is B ).

Colors are represented by a combination of red, green, and blue values. The lowest value ( 00 ) will be the darkest version of the color (closest to black), and the highest value ( FF ) will be the lightest version of the color (closest to white).

Setting all three pairs to the lowest value ( 00 ) will produce a solid black color:

Setting all three pairs to the highest value ( FF ) will produce a solid white color:

Let’s say you wanted the heading text color to be a bright red. To achieve this, you can set the red ( RR ) value to the highest possible value ( FF ). Since you do not want any green or blue, you can set the green ( GG ) and blue ( BB ) values each to the lowest possible value ( 00 ).

By changing the amount of red, blue, and green, you can produce a variety of colors. #DC143C has a large amount of red ( DC ) — this will produce a “Crimson” color. #EE82EE has large amounts of red ( EE ) and blue ( EE ) — this will produce a “Violet” color. #40E0D0 has large amounts of green ( E0 ) and blue ( D0 ) — this will produce a “Turquoise” color.

Note: CSS hex codes are not case-sensitive. This means the alphabetic characters can be upper or lowercase — #ff0000 is equivalent to #FF0000 . CSS also supports shorthand values. This means that #F00 is equivalent to #FF0000 .

The approach you adopt should adhere to the coding standards used by your project.

Next, learn how to use alpha values with CSS hex codes.

Adding an Alpha Value to CSS Hex Codes

Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (where alpha is A ). The first six values (the red, green, and blue ones) remain the same.

The AA value in #RRGGBBAA can range from the lowest value possible ( 00 ) to the highest value possible ( FF ). Lowering the value will cause the visibility to become fainter and fainter until it becomes transparent. Raising the value will cause the visibility to become more and more opaque.

Let’s say you want a blue color that is fairly transparent.

First, start with the hex code for the blue color:

div  background-color: #0080FF; > 

Next, you can change the transparency by adding two more values to the hex code. In this example, the alpha value is set to 80 :

div  background-color: #0080FF80; > 

The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency, too! No color format changes required.

Using Chrome DevTools Tip for Picking Colors

One quick tip for seeing your colors in different formats is with the Chrome DevTools.

Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to adjust the values directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

This example adjusts the alpha value and color value. Then toggles between hex code format, RGBA format, and HSLA format.

Conclusion

In this article, you reviewed hex color codes and explored using alpha values for transparency.

The browser support for #RRGGBBAA hex codes requires modern browsers. It is not available in older versions of Internet Explorer. Reference Can I Use #rrggbbaa hex color notation to see if this format is suited for the target audience of your project.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers — for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Источник