Windows

Photoshop how to make white color transparent. Transparent color and background in CSS

How to set transparent color in css? There are currently 3 ways to do this.

Method 1 - transparent value

If you set the text or background color to transparent , the color will be completely transparent, i.e. invisible. Example:

color:transparent;

Such text will not be visible on the page.

Method 2 - rgba color mode

And this is already an innovation css3. Previously, there was no such mode in web development, there was only rgb. Surely you know how to write color in this format. To do this, you need to specify three values in brackets from 0 to 255, indicating the saturation of one of the three primary colors (red, green, blue). For instance:

Background: rgb(230, 121, 156);

The rgba format is no different, only a fourth value is added - the degree of transparency of the element from 0 to 1. In general, this notation format is mainly used to set a semi-transparent color, and not completely transparent. To achieve full transparency, you only need to write 0 as the fourth value.

Background: rgba(0, 0, 0, 0);

In this case, the remaining 3 digits do not play a special role.

A translucent color can be set if the fourth parameter is set to a value from 0.01 to 0.99. O already wrote a little about setting translucency for the background in , you can read it if you are interested.

Method 3 - opacity

Another property from css3 technology. But I want to warn you right away that it works a little differently. With opacity, transparency is set to the entire block to which it is applied. Thus, the readability of the text and the perception of pictures deteriorate. So I see the point in using the property only for blocks in which there is no text and some other information. Values can be set from 0 to 1, as in the case of the fourth parameter when specifying a color in rgba format.

In general, on this moment these are all the ways I know of setting a transparent color in css. Why this is necessary is another question. Through a transparent background, what is under it can be seen. Sometimes it needs to be done that way by design. In general, the technique with translucency is very common today.

Transparent background (background)

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.

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 the background image is visible through it. 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.

Set the color with rgba not difficult. As already mentioned, the first three letters mean the three primary colors: red, green and blue, or rather their share (from 0 to 255). By entering different values, you can get millions of different colors, and translucency will allow you to come up with a lot of beautiful effects for the site, if necessary.

In some cases, for example, when designing a site, you may encounter a situation where the background of the image does not match the color of the site itself in any way. The obvious solution is to make this background transparent.

You will need

- Adobe Photoshop.

Instruction

Open the desired image in Adobe Photoshop (menu item “File” (File) -> “Open” (Open) or hot keys Ctrl + O). Click the menu item "Select" (Select) -\u003e "Color Range" (Color Range). The Color range window will appear.

Find the "Select" item, it is located at the very top of the window. Click on it. In the menu that opens, you can select a group of colors or tones, which can later be made transparent. Those. only reds, only greens, blues, or only midtones, shadows, etc. If you need to point to select one color, specify in this paragraph "By samples".

Find the item "Scatter" (Fuzziness) - with it you can expand the range of selectable colors. Below are the items "Selected area" and "Image". If you select the first one, then the selected area will be displayed in the preview window of the program. If the second, then the image will be shown in its entirety.

In the right part of the window there are three buttons with the image of pipettes. On the first of them there is just a pipette, on the second - a pipette with a plus, and on the third - with a minus. Click on the first one and click in the preview window or on the document itself on the color you want to make transparent. Select "Selected Area" to see which parts of the image are selected.

If you want to add another color to the selected color, click on "Pipette +", and then click on this color. If you reduce it, then proceed in the same way, only with the help of "Pipette-". After selecting the desired color (or colors), click OK. As you can see, the selected colors have become highlighted in the document.

In the layer list (if it's not there, press F7) click right click click on the background, in the menu that appears, select "From background", and in the next window - immediately OK. The background will turn into a layer. Press Delete on your keyboard. The selected areas will become transparent.

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. By default, the plain background of the picture is replaced by a transparent one. 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 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.