Transparent css background. How to make a layer translucent? Transparent background example

Good day, web development geeks, as well as its newbies. For those who do not follow the trends in the IT field, or rather web fashion, I want to solemnly announce that this publication is on the topic: “How to make a transparent css block tools" just in time for you. Indeed, in the current 2016, the introduction of various transparent objects into online services is considered a stylish move.

Therefore, in this article I will tell you about all the existing ways to create transparency, starting from antediluvian solutions, focus on the compatibility of solutions with browsers, and also give specific examples of program code. And now to work!

Method 1. Antediluvian

When were there weak computers and "ability" is not developed, developers have come up with their own way of creating a transparent background: the use of transparent pixels in turn with color ones. The block created in this way looked like a checkerboard when scaled, but in normal size it resembled some kind of transparency.

This, in my opinion, "crutch" of course helps out in older versions of browsers in which modern solutions do not work. But it is worth noting that the quality of text display , inscribed in such , falls sharply.

Method 2. Not confused

In rare cases, developers solve the problem with the introduction of a translucent image by inserting ... a ready-made translucent image! For this, images saved in PNG-24 format are used. The graphic format allows you to set 256 levels of translucency.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

However, this method is not convenient for several reasons:

1. Internet Explorer 6 does not work with this technology, you need to write script code for it;
2. You can't change background colors in css;
3. If the image display function is disabled in the browser, it will disappear.

Method 3. Promoted

The most common and well-known way to make a block transparent is the property opacity.

The value of the parameter varies in the range , where at 0 the object is invisible, and at 1 it is fully displayed. However, here there are some unpleasant moments.

First, everything child elements inherit transparency. And this means that the inscribed text will also “shine through” along with the background.

Secondly, Internet Explorer again "turns up its nose" and up to version 8 does not function with opacity.

To solve this problem, use filter:alpha (Opacity=value).

Consider an example.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Method 4. Modern

Today, professionals use the rgba (r, g, b, a) tool.

Before that, I said that RGB is one of the popular color models, where R is responsible for all shades of red, G - shades of green and B - shades of blue.

In case of css parameter variable A is responsible for the alpha channel, which in turn is responsible for transparency.

Main advantage the last way- the alpha channel does not affect objects inside the styled block.

rgba (r, g, b, a) is supported since:

• 10 versions of Opera;
• Internet Explorer 9;
• Safari 3.2;
• 3 versions of Firefox.

I want to note interesting fact! Beloved Internet Explorer 7 throws an error when combining a property background color with the name of the colors (background-color: gold). Therefore, you should only use:

background-color: rgba(255, 215, 0, 0.15)

And now an example.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

In our store you will find all kinds of flowers.

Note that the block's text content is fully visible (100% black), while the background is set to an alpha channel of 0.88, i.e. 88%.

Task

Make a block element with all its content translucent.

Solution

To change the degree of transparency of an element, the style property opacity is used with a value from 0 to 1, where 0 corresponds to full transparency, and 1, on the contrary, to the opacity of the object. IN Internet browser Explorer this property does not work, so you have to use filter specifically for it, a property that is not part of the CSS specification. Example 1 shows how to set a layer's transparency for all browsers.

Example 1. Semi-transparent layer

HTML5 CSS 2.1 IE Cr Op Sa Fx

Result this example shown in fig. 1.

Rice. 1. Semi-transparent layer in the Safari browser

The filter property adds transparency only to those elements where at least one of the sizes (width or height ) is set or absolute positioning is set for the element (position : absolute ).

Also note that transparency affects all the contents of the layer, including child elements, and you won't be able to increase the level of opacity for them by varying the opacity. In example 1, where the layer's transparency is set to 0.7 , the text inside the layer gets the same value. It is permissible to set it less, but the text cannot exceed the transparency value of 0.7.

Look closely at the drawing. The background of the dropdown box is made translucent. This is a fairly common design technique. Let's think about how this can be implemented.

Task

Make crossbrowser translucent color.

Solution

The first thought in this situation is to use a png24 image for the background with the translucency already set. But this picture is completely redundant. You can do just fine without it (and therefore without an extra request to the server). Let's try to find the best solution.

The second thought is to use . But in this case it is not very convenient. After all, then not only the background, but also the inscriptions will become translucent. Yes, actually, all the window at once.

Of course, you can try to add an additional container and apply opacity only to it, but this HTML element will be for decoration only and will obviously be superfluous. Is it possible to do without it?

Of course you can! If you use RGBA.

RGBA color description format

CSS3 allows color to be specified using the RGB and RGBA functions. At the same time, we must indicate the share of each color component, under which one byte is allocated (from 0 to 255, suddenly someone does not know).

The syntax for this case is very simple:

background: rgb(0, 255, 0); /* pure green color */

For RGBA, a fourth parameter is added - alpha transparency (from 0 to 1).

Background: rgba(255, 0, 0, 0.5); /* pure red with 50% opacity */

Here it is, the solution to our problem. It is enough to set the background color using rgba and everything will look as we need. No extra pictures and elements!

Where can I get these numbers?

You can look at the constituent colors using the eyedropper tool in Photoshop.

About cross-browser compatibility

Since the RGB function is much older than RGBA and has been around since the days of the CSS2 standard, you can use the following duplicate construction to protect against the most ancient browsers:

SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )

With this approach, the great-grandfathers of modern browsers will not have translucency, but the color itself will remain correct.

Separately, you will have to take care of IE. Donkey-like ones up to the 8th version inclusive do not understand RGBA.

As always: land - to the peasants, factories - to the workers, and donkeys - a crutch! As .

Of course, in combat conditions, we take out this rule in a separate CSS, which we include .

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

The trick is to specify the same start and end colors (ff0000 - red) and take advantage of the fact that you can set the alpha channel for the gradient in this filter (in the example, the value is 80).

For reference: the filter uses a hexadecimal system and the code FF corresponds to a completely opaque color (in decimal it is 255). Accordingly, hexadecimal 80 is decimal 128, i.e. 50% transparency.

Verified in:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome

Hi all. As you may know, background is a CSS property that allows you to set the background color or upload an image to act as the background. CSS3 also introduced the ability to create linear and radial gradients, but this is a topic for a separate article. In the same one, I wanted to tell you how to set transparency for the background property in css.

Set transparency for css background

So, all this is done very simply thanks to such a color recording format as rgba . If you are working with graphic editors, then you probably know that the rgb color mode stands for: the proportion of red (red), the proportion of green (green) and blue (blue). So, rgba is almost the same, only one more parameter is added - transparency. It is written like this:

Background color: rgba(173, 57, 22, 0.5)

First, we explicitly indicate that we are setting the color in rgba mode. Then we indicate the saturation values ​​​​of the three primary colors from 0 to 255, where 255 is the highest saturation. The fourth parameter is our transparency. Here the value is written from 0 to one. 1 is a fully opaque element, and 0 is a fully transparent element. Accordingly, if you set it to 0, then the background color will not be visible at all.

Now you know how to set transparency for the background property in css. To do this, you need to use the rgba color mode. There is also an opacity property, but it applies to the entire element as a whole. That is, when applying opacity, transparency can also be applied to the text, which will make it unreadable.

Transparent background example

The benefits of a translucent background are easy to show with an example. For example, we have a general page background. This is what the block would look like if it were given a solid black color:

And now let's set the same black color to the block, but specify it using the rgba color format, specifying the last value as 0.7, for example. It will turn out like this:
Now the background of the block is translucent and you can see through it background picture. This picture and background are for illustration purposes only. As you understand, in css background transparency can come in handy when you need the background of a nested element to show through without obscuring other backgrounds located in other layers.

The color itself is not difficult to set using rgba. As already mentioned, the first three letters mean the three primary colors: red, green and blue, or rather their share (from 0 to 255). Prescribing different meanings you can get millions different colors, and translucency will allow you to come up with a lot more beautiful effects for the site, if needed.

Today I want to talk about the transparent background of a block of text, how to make it, and what CSS3 offers for this. Before moving on to rgba and hsla, let's look at examples of using a translucent background for a block with text, or rather, how this is achieved and what problems arise. To demonstrate, we will use this picture, processed by some java program, and the link to which, unfortunately, was lost a long time ago.

Look at the picture below. There is a graphic background on which you want to overlay a translucent block with text. Ideally, it should be what is in the figure under the number 2, but sometimes what is under the number 3 may occur. There is one more defect, but I will mention it verbally a little lower, because There was no way to screenshot it.

Semi-transparent background without rgba and hsla

1. translucent PNG . The best option, because it is by far the most cross-browser and easiest. In order for the block to be transparent, a one-pixel translucent PNG is required, which is set as the background of the block. And that's it.
   
   Flaws: Only one is required.
2. Transparency via opacity . Block transparency is set cross-browser as follows:

   opacity:0.5;
   filter:alpha(opacity=50);
   -moz-opacity:0.5;

   where 0.5 and 50 are 50% transparency. But there is a problem. If we set the block we need to have such translucency, then we will see that third option in the image above - the content of the block will also become translucent. However, there is a way out - free positioning, with the help of which another block is placed under the block of text, to which translucency is set..

   Consider an example. Let the block with the orange picture be the body tag, a container that will contain both text and a transparent background - #block_bg, inside of which is a block with a translucent background #block_transparent, and a block with text - #block_text.

   
   

   
   

   Text text text, lots and lots of text

   
   

   body ( background: url(image.jpg); )
   #block_bg(
   position: relative;
   overflow: hidden;
   width: 400px
   padding: 10px
   }
   #block_text ( position: relative; z-index: 100; )
   #block_transparent(
   opacity: 0.5
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   height: 5000px;
   width: 400px
   }

   I draw your attention to the fact that it is necessary to set the width of the transparent block (line 19), otherwise it will collapse to 1 pixel, and the width of the general block (line 5), otherwise the text will go beyond the transparent block (although the width can be set for the text, but there is no fundamental difference will). To have indents from the text and the edge of the transparent block, we use padding in the sixth line. To make the transparency adjustable in height, we give it a larger height (line 18) and an overlap for the general block (line 4).
   So, we stuffed everything into one block, which can be pushed into any part of the page where there is an interesting background. Yes, you may want to put a background on the common block_bg block, but you better not - make your life difficult (depending, of course, on the task). In other words, it's better to shove this whole structure into a separate block, to which you can set the padding and not suffer.
   Flaws: Too bulky.

rgb and hsl, rgba and hsla are CSS3 properties

More precisely, these are not really properties - this is a new ability to set colors for properties such as background, color, border, etc.

The name of the properties comes from the color systems RGB (Red, Green, Blue) and from HSL (Hue, Satutation, Lightness). The first system describes the color space by mixing the primary colors - red, green and blue. In the second system, the color components display color information in a more familiar form for humans: What is this color? How saturated is he? How light or dark is it?

rgb and rgba

Let's start with rgb and rgba. Values ​​r, g, b can be set from 0 to 255 or from 0% to 100%. The value a (alpha, transparency) is measured from 0 to 1 (fractional values ​​are specified through a dot - 0.4, 0.7, etc.). If r, g, and b are given values ​​that exceed their allowable range (for example, 300 or 110% or -5), they will shrink to the nearest allowable value.

Consider everything on the example of the background property (although those who wish can take color or border).

background: rgb(0, 0, 255); /*pure blue*/
background: rgb(100%, 50%, 0%); /*pure blue*/
background: rgb(10, 145, 500); /*will be recognized as 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*same as above*/
background: rgba(100, 50, 255, 0.1); /*very transparent shade of lilac*/

Yes, I forgot to say that you can’t put a space between the property and the opening bracket and you can’t set some values ​​​​in ordinary numbers in one line, and others as percentages. If you do this, nothing will work.

hsl and hsla

And a few words about hsl and hsla. The value of a is set in the same way as for rgb and rgba, but the first three parameters are slightly different. h is set from 0 to 360, and s and l are set from 0% to 100%.

And the most important thing. If in rgb it is very difficult to determine the color from the head (it is almost always necessary third party program with a "pipette"), then it is enough to have one picture in front of your eyes for everything to fall into place. The picture shows the shades of the h parameter.

To estimate the desired color, select a hue, then estimate s, color saturation (where 0% is an unsaturated color (grayscale), and 100% is the most saturation) and its lightness (0% - with it the color will always be black, and with 100% - white). Based on the above, the picture shows light tones at 100% saturation and 50% lightness.

Now the entire color space is in my head at a glance. Of course, manual selection does not replace an eyedropper, and not everyone needs to have a "color space" in their heads, but sometimes, in order to quickly figure out what is needed and test it, it fits.

And just a couple of examples

background: hsl(180, 100%, 50%); /*rich blue color*/
background: hsla(140, 50%, 30%, 0.5); /*translucent, barely noticeable that the shade of green*/

Flaws: all 4 properties are not supported by donkey and older browsers.

Completion

In general, CSS3 provides another very useful thing, but as always, IE is the main brake on progress. For client sites, I would refrain from using it for the time being (they will still take out the brain in vain) and would take the option with PNG. And on your site - why not. Especially if it is visited by advanced people who do not sit on donkeys or any fragments of antiquity.