How to set transparent background in css. Transparent color in css and how to set it

The element's translucency effect is clearly visible in the background image and has become widespread in various operating systems because it looks stylish and beautiful. In web design, translucency is also used and achieved through the opacity property or the RGBA color format that is set for the background.

opacity property

The main feature of this property is that the transparency value affects all child elements inside, not just the background. This means that both the background and the text will become translucent and it will not work to increase the transparency level by adding . In table. 1 shows the appearance of text and background with different opacity values.

Example 1 shows how to create a translucent box using opacity .

Example 1: Background on a web page

HTML5 CSS3 IE 9+ Cr Op Sa Fx

opacity



RGBA

Usually, by design, only the background of the element should be translucent, and the text should be opaque to preserve its readability. The opacity property doesn't fit here because the text inside the element will also be partially transparent. It is best to use the RGBA format, of which the alpha channel, or in other words the transparency value, is a part. The value is written rgba , then the values ​​of the red, blue and green components of the color are listed in parentheses separated by commas. Last comes transparency, which is set from 0 to 1 (Fig. 1), while 0 means full transparency, and 1 means opacity of the color.

Rice. 1. Syntax of using rgba

Example 2 shows the use of the RGBA format to create a translucent background.

Example 2: Semi-transparent background

HTML5 CSS3 IE 9+ Cr Op Sa Fx

rgba

Hobbes was one of the first to highlight this problem from the standpoint of psychology.


The result of this example is shown in Fig. 2. Opacity value for the background is set to 90%.

Rice. 2. Semi-transparent background and opaque text

Quite often, you can find a suitable image on the Internet, for example, to insert it on a website. Or perhaps you are making a collage, and you need to add others to one picture. That's just the desired images usually have some kind of background.

Let's see how we can make a transparent background for the image using the editorAdobephotoshop. I have the English version of Adobe Photoshop CS5 installed, so I will show it on it.

I will try to give various combinations of hot keys.

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 not take up much space on your hard drive. By clicking on the link, you can read the detailed article. You can download the Paint.net program 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. A New Layer window will open, click OK. After that, the lock will disappear.

Select the Magic Wand tool. In the property bar, specify the sensitivity level, set different values ​​to understand how it works, for example, 20 and 100. To deselect the picture, press "Ctrl + D".

Set the sensitivity and press the 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. To delete selected areas, click "Delete".

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

If you have an image or photo that has a lot of different colors and objects, let's look at how to make a transparent background for an image in Photoshop.

In this case, we will 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 leave 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 highlighted, press "Alt" and remove it.

Press "Q" to view the result. The parts of the image that 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 unnecessary parts of the background on them, remove them using the Eraser tool. We save images made on a transparent background in PNG or GIF format.

Make the white background of a picture transparent, or make a transparent background for individual fragments of a color image or photo in Photoshop. After that, you can use them where necessary: ​​paste 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 CSS properties. There are two ways to achieve transparency: through the opacity property and 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.

Transparency is specified simply by specifying a real number between 0.0 and 1.0. The lower the number, the less visible the object will be.

opacity: 0.5 // translucency opacity: 0.2; // The object is only visible at 20% opacity: 0.8; // Object is only 80% visible

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

The text is also transparent



2. Transparency via CSS property background:rgba()

The second option for setting the background transparency on the site is css property background:rgba. Consider an example

The text is also transparent



This code translates on the page to the following:

The difference between the two methods is that the text inside the block becomes transparent when opacity is used.

In the second case, there is no such problem. Therefore, you need to look at the situation already - what exactly are you waiting for.

The RGBa CSS property allows you to set a background color with an alpha channel (i.e. fill blocks with a translucent color).

Of course, CSS has an opacity property, but its main drawback is that all child elements inside a transparent block will also inherit its transparency.

Most often, the background of the element is filled with a one-pixel PNG24 and transparency is fixed in IE6, or the background is also made transparent using css opacity. The text is positioned separately already in another element, but this, in my opinion, is not very convenient ...

Via RGBa the solution looks like this:

1. Let's say we want a blue background with 50% transparency.

IE6-8, Opera 9.x, Mozilla Firefox 2.x will not support it

2. For IE, you can try and make it more elegant:

.element( background : transparent ; filter:progid :DXImageTransform .Microsoft .gradient(startColorstr= #990000ff , endColorstr= #990000ff ) ; zoom: 1 ; )

Note: The color in the filter is set by 8 numbers. The first 2 numbers are the degree of transparency: FF - completely opaque, 00 - transparent. The next 6 numbers are the usual HTML color designation.

The use of RGBa is not limited to the background color of blocks…

The main thing is to specify a picture on your computer or phone, and then click the OK button at the bottom of this page. Default plain background The image is changed to transparent. The background color of the original image is determined automatically, you just need to specify in the settings what color to replace it with. The main parameter that affects the quality of the replacement is the "Intensity of replacement" and it can be different for each picture.

An example of a photo of a pink rose without changes and after replacing the solid background with transparent, white and green:


First example with a rose flower on a transparent background is made with the following settings:
1) Replacement intensity - 38;
2) Smoothing around the edges - 5;
3) Replace the solid background with a transparent one;
4) Cropping (<0) или Добавление (>0) along the edges - "-70";
5) Invert - disabled (check not checked).

For creating second example, with a white background, the same settings were used as in the first example, except for the parameter: "Replace plain background with" - white. V third example, with a green background, the settings are also used, as in the first example, except for the parameter: "color in hex format" - #245a2d.

The original image is not changed in any way. You will be given another processed picture with a transparent background or the background you specify.

1) Specify an image in BMP, GIF, JPEG, PNG, TIFF format:

2) Settings for replacing a solid background
Replacement rate: (1-100)

Edge smoothing: (0-100) Replace plain background with: transparent (PNG-24 only) red pink purple blue turquoise sky lime green yellow orange black gray white or hex color: open the Crop palette (<0) или Добавление (>0) at the edges: (from -100 to 100)
(Intensity for additional cropping or adding pixels around a selection on a transparent background) Invert Selection (instead of the background, replace the foreground)

Task

Do block element with all its contents 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 browser Internet Explorer this property doesn't work, so you have to use filter specifically for it, a property outside 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

translucent layer

Obviously, it is verified that interpolation distorts the Dirichlet integral in an interesting way, so the idiot's dream came true - the statement is completely proved.


The result of this example is shown in Fig. one.

Rice. 1. Semi-transparent layer in Safari browser

The filter property adds transparency only to those elements where at least one of the sizes (width or height ) is set or the element is set to absolute positioning (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.

You may be interested