How to make a transparent background. Change white or plain background to transparent online. Transparency of various elements

with position: absolute; before (or after) #main and at the same height as #main , then apply background-image and opacity: 0.2; .

#main ( position: relative; ) #main:after ( content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11 /tandem.jpg); width: 100%; height: 100%; opacity: 0.2; z-index: -1; )

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 plain 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. IN 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)

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 Photoshop's eyedropper tool.

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 a fully opaque color corresponds to the code FF (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

Semi advantages transparent background 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 color rgba format, specifying the last value in 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 want the background of a nested element to show through without obscuring other backgrounds on 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). By setting 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.

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 existing methods creating transparency, starting from antediluvian solutions, I will focus on the compatibility of solutions with browsers, as well as give specific examples 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 regular size it was like a 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 ... an already finished 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 browser's image display function is disabled, 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, all child elements inherit transparency. And this means that the inscribed text will also “shine through” along with the background.

Secondly, Internet Explorer turns up its nose again 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 box.

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 an 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%.