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 of 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 -Pictures
• 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. IN 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 point, 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 a 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, because unlimited Internet is 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.2Older browsers 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 a 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.

In this lesson, we will analyze such CSS properties - opacity and RGBA... Property Opacity is responsible only for the transparency of elements, and the function RGBA - for color and transparency, if you specify the transparency value of the alpha channel.

CSS Opacity

Numerical value for opacity is specified in the range from 0.0 to 1.0, where zero is full transparency and one, on the contrary, is absolute opacity. For example, in order to see 50% transparency, you need to set the value to 0.5. It must be borne in mind that opacity extends to all children of the parent. This means that the text on a translucent background will also be translucent. And this is already a very significant drawback, the text does not stand out so well.

In the screenshot, you can clearly see that the black text has become the same semi-transparent as the blue background.

Div (
background: url (images / yourimage.jpg); / * Background picture * /
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: # 027av4; / * Semi-transparent background color * /
opacity: 0.3; / * Background translucency value * /
height: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}

CSS transparency in RGBA format

Format for recording color RGBA, is a more modern alternative to property opacity. R (red), G (green), B (blue) - means: red, green, blue. The last letter A - means the alpha channel, which sets the transparency. RGBA Unlike Opacity does not affect children.

Now let's look at our example using RGBA... Let's replace these lines in styles.

Background: ## 027av4; /* Background color */
opacity: 0.3; / * background translucency value * /

to the next one line

Background: rgba (2, 127, 212, 0.3);

As you can see, the transparency value of 0.3 is the same for both methods.

Result of example with RGBA:

The second screenshot looks much better than the first one.

Playing with the translucency of the background of the blocks, you can achieve interesting effects on the site. It is important that these translucent blocks go over a variegated design such as a photograph. Only in this case the effect will be noticeable. This technique has long been used in design, even before the appearance of any CSS3, it was implemented purely in graphics programs.

If the customer requires the layout to look good in older browser versions Internet Explorerthen add property filter and do not forget to comment out so that the validity of the code is not affected.

Output

Format RGBA all modern browsers are supported except Internet Explorer... It is also very important that RGBA flexible, it acts only on a specific given element, without affecting children. It is clear that this is more convenient for the layout designer. My choice is clearly in favor of the format RGBA to receive transparency in CSS.

For better consolidation of the material and greater clarity, I suggest you go through.

With the advent of CSS3, the work of layout designers has become much easier and more logical: after all, now you can really flexibly configure 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 backgrounds in fluid layout. Most importantly, do not forget to set the background color in CSS when using any image, as users may simply not load the image.

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 upper left 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 you need to use CSS to 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: prefixes must be used to display the background correctly in earlier versions of browsers. 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 positioning 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 under the 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.

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. In this case, you can set the transparency of the CSS background without an integer value: instead of 0.3 it is enough to write

.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 for all layout designers is the old versions of IE, they do not allow full use of CSS3. When coding, do not forget to use special services that check if your browser supports any CSS property. If you cannot install old versions of browsers, find a service that will check the website operation in different browsers online.

Today I want to talk about a 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 semi-transparent background for a block with text, or rather, how this is achieved and what problems arise. For demonstration, we will use this picture, processed by some java program, and the link to which, unfortunately, was lost long ago.

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

Translucent background without rgba and hsla

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

   opacity: 0.5;
   filter: alpha (opacity \u003d 50);
   -moz-opacity: 0.5;

   where 0.5 and 50 are 50% transparency. But there is a problem. If we set the desired block to such a 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, which is given the translucency.

   Let's look at an example. Let the block with the orange picture be the body tag, the container containing both the text and the transparent background is #block_bg, inside which the block with the translucent background is #block_transparent, and the block with the text is #block_text.

   
   

   
   

   Text text text, many, many 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 \u003d 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 into 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 be). To indent the text and the edge of the transparent box, use padding on the sixth line. To make the transparency adjustable in height, give it a higher height (line 18) and an overlap for the general block (line 4).
   So, we stuffed everything into one block, which can be shoved into any part of the page where there is an interesting background. Yes, there may be a desire to set a background for the common block_bg, but it's better not - make your life more difficult (depending, of course, on the task). In other words, it is better to cram this whole structure into a separate block, to which you can set padding and not suffer.
   disadvantages: Too cumbersome.

rgb and hsl, rgba and hsla - CSS3 properties

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

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

rgb and rgba

Let's start with rgb and rgba. The r, g, b values \u200b\u200bcan be set from 0 to 255 or from 0% to 100%. The a (alpha, transparency) value is measured from 0 to 1 (fractional values \u200b\u200bare specified through a point - 0.4, 0.7, etc.). If r, g, and b are set to values \u200b\u200bthat exceed their valid range (for example, 300 or 110% or -5), they will shrink to the closest valid value.

Let's look at the background property as an example (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 previous * /
background: rgba (100, 50, 255, 0.1); / * very transparent shade of lilac * /

Yes, I forgot to say that you cannot put a space between the property and the opening parenthesis, and you cannot set some values \u200b\u200bin ordinary numbers on one line, and others in 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 with the first three parameters, the situation is slightly different. h ranges from 0 to 360, and s and l ranges from 0% to 100%.

And the most important thing. If it is very difficult to determine the color from the head in rgb (a third-party program with an eyedropper is almost always needed), then here 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 shade, then estimate s, color saturation (where 0% is an unsaturated color (shade of gray), 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 the tones at 100% saturation and 50% lightness.

Now the entire color space is in your 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 suits.

And just a couple of examples

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

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

Completion

In general, CSS3 provides some other very useful things, but as always, IE is the main brake on progress. For client sites, I would refrain from using it for now (they will still endure the brain in vain) and take the option with PNG. And on your website - why not. Especially if it is visited by advanced people who are not sitting on donkeys or any fragments of antiquity.

Quite often, you can find a suitable image on the Internet, for example, to embed it on a website. Or perhaps you are making a collage, and you need to add others to one drawing. But the images you need usually have some kind of background.

Let's figure out how you can make a transparent background for the picture using the editorAdobePhotoshop... I have an English version of Adobe Photoshop CS5 installed, so I will show on it.

I will try to give you various keyboard shortcuts.

If you do not have Photoshop installed yet, you rarely use it or it is in English, you can make a transparent background in Paint.net. This is a simple Russian-language image editor that will take up little space on your hard drive. By clicking on the link, you can read a detailed article. You can download Paint.net from our website.

Let's start with a simple example. Suppose you have an image on a plain background, it can be a logo or the name of something. Let's make this logo or inscription on a transparent background in Photoshop.

Open the desired image in the editor. Now let's make a transparent background for the layer. In the "Layers" window, double-click on the added layer - there will be a lock opposite it. The "New Layer" window will open, click "OK" in it. After that, the lock will disappear.

Select the "Magic Wand" tool. Specify the sensitivity level in the property bar, assign different values \u200b\u200bto understand how it works, for example 20 and 100. To deselect the picture, press "Ctrl + D".

We set the sensitivity and click with a magic wand on the background area. To add to the selected background, those parts that are not selected, hold down "Shift" and continue the selection. Press “Delete” to remove the selected areas.

Now, instead of the background, a checkerboard - this means that we managed to make the white background transparent. Remove selection - "Ctrl + D".

If you have an image or photograph with many different colors and objects, consider how to make a transparent background for an image in Photoshop.

In this case, we'll use the Quick Selection tool. We click on the magic wand with the left mouse button with a slight delay and select the desired tool from the menu.

Now we need to select the object that we want to keep on a transparent background. In the property bar, set different sizes and click on the object, adding areas to it. If an unnecessary background is mistakenly selected, press "Alt" and remove it.

Press “Q” to view the result. The parts of the image that will become transparent will be highlighted in pink.

Copy the selected areas by pressing "Ctrl + C". Next, create a new file, "Ctrl + N", with a transparent background.

Paste the copied fragments into it, "Ctrl + V". If there are unwanted background parts left on them, remove them using the Eraser tool. Save pictures made on a transparent background in PNG or GIF format.

Make the white background of the picture transparent, or make the background transparent for individual fragments of a color image or photo in Photoshop. After that, you can use them where necessary: \u200b\u200bembed them on the site, add them to another picture, or make interesting collages.

CSS background transparency

The transparency of the background on the site is created through a CSS property. There are two ways to achieve transparency: through the opacity property and the background: rgba (). Let's look at each of them, and then make a comparison.

1. CSS opacity property for background transparency

CSS has an opacity property with which you can set the transparency of images, texts, including backgrounds.

The transparency is set simply by specifying a real number from 0.0 to 1.0. The lower the number, the less visible the object will be.

opacity: 0.5; // Translucency opacity: 0.2; // Object is only visible at 20% opacity: 0.8; // Object is only visible at 80%

Let's look at an example with the opacity property.

The text is also transparent