How to make a semi-transparent background in css rgba. Methods for creating transparent backgrounds. Using PNG images

Good day, web development geeks, as well as her newbies. For those who do not follow the trends of the IT field, or rather, the web fashion, I want to solemnly inform that this publication is on the topic: “How to make a transparent block css 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 methods of creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, and also give specific examples. program code... Now get to work!

Method 1. Antediluvian

When computers were still weak and "abilities" were not developed, developers came up with their own way of creating a transparent background: using transparent pixels in turn with colored ones. Thus, the created block looked like a checkerboard when scaled, but in its normal size it looked like a kind of transparency.

This, in my opinion, "crutch" of course helps out in old versions of browsers in which modern solutions do not work. But it should be noted that the quality of the display of the text , inscribed in such, falls sharply.

Method 2. Not confused

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

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 cannot modify the background colors in css;
3. If the function of displaying images is disabled in the browser, it will disappear.

Method 3. Proprietary

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

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

First, all children inherit transparency. 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 \u003d value).

Let's look at an example.

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 the case of the css parameter, the variable A is responsible for the alpha channel, which in turn is responsible for transparency.

The main advantage of the latter method is that 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, it is worth using only:

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

Now for an example.

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

With the advent of CSS3, the work of layout designers has become much easier and more logical: now you can really flexibly customize any object, using JavaScript less and less. Let's say you need to adjust the transparency of the background - CSS immediately offers several options.

The background is set by a set of attributes, background-repeat, background-attachment, background-origin, background-clip, background-color), and each of them can be written separately or combined under the background attribute. Let's analyze each of them in more detail.

Background-color attribute

Even IE8 supports this method. Several images are used as a background when rubber layout... Most importantly, do not forget to set the background color in CSS when using any image, as the image may simply not load for users.

Background-position attribute

If you're using an image to set the background for a block, CSS will allow you to position the image anywhere on the screen. By default, the image is located in the left upper corner... The attribute accepts either verbal indications (top, bottom, left, right) or numerical indications (percentages, pixels, and other units). In this case, you must specify two values: horizontally and vertically:

body (background-position: right center;) - in this example, the background will be located on the right side of the page, with the same bottom and top distance to the image.

Background-size attribute

Sometimes required with using CSS stretch the background or reduce its size. To do this, use the background-size attribute, and the background size can be set both in pixels or percentages, and in any other units of measurement.

There are some problems with this attribute: for the correct display of the background in early versions browsers need to use prefixes. Of course, current versions fully support this attribute and the need for specific properties has disappeared.

Background-attachment attribute

This attribute specifies the scrolling behavior of the background image. So, it can take 3 values \u200b\u200b(excluding inherit, which is common to all the attributes presented in this article):

• fixed - makes the picture on the background motionless;
• scroll - the background scrolls along with other elements;
• local - the image in the background is scrolled if content has scrolling. Backgrounds that go beyond the content are captured.

Usage example:

body (background-attachment fixed).

Firefox does not currently support the latter property (local).

Background-origin attribute

This attribute is responsible for the positioning of the element. Older browsers require prefixes. The property itself has three parameters:

• padding-box positions the background relative to the edge, taking into account the thickness of the frame;
• border-box differs from the previous property in that the border line can completely or partially overlap the background;
• content-box positions the image by binding it to the content.

If multiple values \u200b\u200bare given, browsers can react differently: Firefox and Opera only accept the first option.

Background-repeat attribute

Typically, if a background is defined by an image, it should repeat horizontally or vertically. For this, the background-repeat attribute is used. Thus, the background of a block whose CSS contains such a property can have one of several parameters:

• no-repeat - the image appears on the page in a single version;
• repeat - the background is repeated along the x and y axes;
• repeat-x - only horizontally;
• repeat-y - only vertically;
• space - the background is repeated, but if the space cannot be filled, then voids appear between the pictures;
• round - the image is scaled if it is impossible to fill the entire area with whole pictures.

An example of using the attribute:

body (background-repeat: no-repeat repeat) - similarly background-repeat: repeat-y.

In CSS3, it is possible to set values \u200b\u200bfor multiple images by listing parameters separated by commas.

Background-clip attribute

This attribute defines the behavior of the background below borders (for example, in the case of dashed borders):

• padding-box - the background is displayed strictly inside the block;
• border-box - the image goes under the frames;
• content-box - the picture in the background appears only inside the content.

Usage example:

body (background-clip: content-box;).

Chrom and Safari require the -webkit- prefix.

The opacity and filter attributes

The opacity attribute allows you to set the transparency of the background - the CSS property will work in all browsers. The value is set in the range from 0.0 to 1.0 inclusive. With this, you can set transparency cSS backgroundwithout integer value: instead of 0.3 it is enough to write 3:

.block (background-image: url (img.png); opacity: .3;).

To set the transparency of the background, the CSS of which will work even for IE below version 9, use the filter attribute:

.block (background-image: url (img.png); filter: alpha (opacity \u003d 30);).

In this case, the opacity value is set in the range from 0 to 100. Note that the opacity attribute differs from the opacity setting using RGBA in inheritance: when using opacity, not only the background becomes transparent, but all elements inside the block.

Always follow the statistics of browser usage in the CIS and all other countries. The biggest problem of all layout designers is the old versions of IE, they do not allow full use of CSS3. Don't forget to use special serviceswhich check if your browser supports any CSS property. If you cannot install old versions of browsers, find a service that will check the site in different browsers online.

You will need

• - "Photoshop" program
• - the image for which you want to make a translucent background.
• - know how to create a new layer
• - be able to use the Fill tool, draw shapes in Photoshop

Instructions

Double click on the name of the image layer and in the field that appears, write any new name for this layer. This is necessary for free movement of this layer and obtaining a transparent background when deleting parts of the picture. If the image already has an opaque uniform background, select it with the Magic Wand Tool. To do this, select this tool on the toolbar and click on the background color, after which all the colors you specified (on which you clicked the mouse) will be selected within the closed area. Delete the selection by pressing the Delete key.

If not uniform, then select the picture itself with the tool "Straight Line" or "Pen". If you select an image with the Pen tool, lay out the desired path and, if necessary, edit it with the Pen + tool. When editing with this tool, you can add anchor points by clicking the created path with the mouse and moving the points to change it. Then, without removing the cursor from the path, press the right mouse button and select "Form Selection". Set Feather to 0 px and check the Anti-Aliasing checkbox. As a result of these actions, the path will be transformed into a selection. Delete the selection by pressing the Delete key.

Create a new layer and place it below the picture layer. Hovering the cursor over it, press the left mouse button and, without releasing the button, move the cursor below the image layer. In this way, you will drag a new layer below the image layer. Below the image itself, create for now an opaque background of the desired color and desired shape.

The opacity property is used to create a transparency effect in CSS.

IE8 and earlier browsers support an alternative property - filter: alpha (opacity \u003d x), where "x" can range from 0 to 100, the lower the value, the more transparent the element will be.

All other browsers support the standard CSS opacity property, which can take as a value numbers from 0.0 to 1.0, the lower the value, the more transparent the element will be:

Try "

Hover transparency

The: hover pseudo-class lets you change appearance elements when you hover over them. We will use this opportunity to make the image lose its transparency on mouse hover:

Try "

Background transparency

There are two possible ways make element transparent: the opacity property, described above, and specifying the background color in RGBA format.

You may already be familiar with the RGB color representation model. RGB (Red, Green, Blue - red, green, blue) is a color system that determines the hue by mixing red, green and blue colors. For example, you can use any of the following declarations to set the text color to yellow:

Color: rgb (255,255,0); color: rgb (100%, 100%, 0);

The colors specified with RGB will differ from the hex values \u200b\u200bwe used before in that they allow for the alpha transparency channel. This means that the background of an element with alpha transparency will show what is underneath.

The RGBA color declaration is similar in syntax to the standard RGB rules. However, among other things, we need to declare the value as RGBA (instead of RGB) and set an additional decimal value of transparency after the color value in the range from 0.0 (full transparency) to 1 (full opacity).

Color: rgba (255,255,0,0.5); color: rgba (100%, 100%, 0.0.5);

The difference between the opacity property and RGBA is that the opacity property applies transparency to the entire element, that is, the entire content of the element becomes transparent. And RGBA allows you to set the transparency of individual parts of an element (for example, only the text or background):

Body (background-image: url (img.jpg);) .prim1 (width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha (opacity \u003d 70); / * for IE8 and earlier * / text-align: center;) .prim2 (width: 400px; margin: 30px 50px; background-color: rgba (255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center;) Try it "

Note: RGBA values \u200b\u200bare not supported in IE8 and earlier. To declare a fallback color for older browsers that do not support color values \u200b\u200bwith alpha channels, specify it first before the RGBA value: background: rgb (255,255,0); background: rgba (255,255,0,0.5);

Do you want to learn how to create pages with an original and vibrant modern design? The use of translucent elements can help you in solving this difficult task. Today we will look at the main practical ways setting the transparency of structural elements.

How do I set transparency?

If we consider this topic through the prism of the historical development of web technologies, then the following approaches can be distinguished:

• Property opacity.
• Using PNG -images
• System format RGBA
• And finally, antiquity or checkered images.

CSS property Opacity

Styling application CSSproperties opacity allows you to set the transparency of the element to which it is applied. The values \u200b\u200bthat can be used as an argument range from 0 to 1.
Let's look at an example.

< html> < head> < title> TODO supply a title < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > There will be a lot of your text

/ * Background for the body of the page * / ). prozrachen (padding: 10px; / * Indentation for text * / background: darkturquoise; / * Set the background color * / margin: 0 auto; / * Center the block * / width: 50%; / * Set the block width * / opacity: 0.7; / * Set transparency * / font: 48px / 64px Times New Roman; text-align: justify; )

As a result, we got a translucent block:

Important!!!

1. Opacitytakes values \u200b\u200bfrom the range: 0 (full transparency) - 1 (opaque).
2. Cross-browser compatibility. AT IE up to the seventh version inclusive Opacitynot supported. The following line will help to achieve the same display of an element:

   filter: alpha (Opacity \u003d 70);

   It should be taken into account that the property filterabsent in htmlspecifications, changes values \u200b\u200bfrom 1 to 100 and can only be applied to elements:

   • with absolute positioning ( position: absolute)
   • with a fixed linear dimension ( height or width).
3. The degree of transparency is inherited by children, whereby the child can be made more transparent, but not made less. Ie, on a translucent background, do not make CLEAR text.

For a better understanding of the material of the last paragraph, in the previous example, set the text to white.

color: white;

and consider it under a microscope:

As you can see, the content of our block (text) has also become translucent. But what if in practice you are not interested in the transparency of the content, but only in the transparency of the background? In this case, go to the next item.

Using PNG images

An interesting feature of the format PNGis that it has 256 levels of transparency. I think you have caught the train of thought, and probably have already built an algorithm for this approach. I just have to voice it.

As a result, we got a block with transparent background and opaque content:

Important!!!

1. Unlike property opacitytransparency is set only for the background
2. Cross-browser compatibility. Works in almost all browsers and that's a plus. But transparency PNGnot supported in IE6... If you are optimizing your site for such antiquity, you will have to use other methods or scripts.
3. When you turn off the display of pictures, your background will disappear (take this point into account when optimizing the display on mobile devices, after all unlimited Internet not always at hand).
4. To change the color and / or transparency, you need to create a new image and upload it to the server.

RGBA system format

One of the most modern methods of changing the background transparency is the use of the system RGBA.

RGBA- color representation system using three standard channels RGB(red, green, blue), and the fourth, the so-called Alpha-channel characterizing the degree of transparency.

background: rgba (r, g, b, a);

In the example we already know, replace the content in CSSfile to the following:

body (background: url (./ vaden- pro- logo. png); / * Wallpaper * / ). prozrachen (padding: 10px; background: rgba (0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px / 64px Times New Roman; color: white; text- align: justify;)

Important!!!

1. Unlike property opacitytransparency is set only for the background
2. Unlike the method PNGpictures, to change the color or the degree of transparency, we just need to change the values rgba.
3. Cross-browser compatibility. Works in all modern browsers (starting with IE9, Op10, Fx3,Sf3.2For older browsers, you will either have to sacrifice transparency or use opacity, png methods.

Checkered images, or respect for history

This method was at the origin of web design, and I saw old-old browsers that really did not know how to do anything. It consists in creating a checkered background, in which colored squares alternate with transparent ones.

As a result of applying such a picture, a pseudo-transparent background was obtained as a background.

Important!!!

1. When viewing text against such a background, eyes can quickly get tired (especially the ripples when scrolling press down).
2. In other respects, the application features are similar to the PNG-pictures method.

Let's summarize?

• There should be a bright, not monotonous picture under the transparent block. On plain background the zest of transparency is lost.
• When choosing a specific practical approach, be guided by which browsers your target audience uses. Cross-browser compatibility is important.