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 on the topic: “How to make a transparent css block with tools” is just the way 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 for creating transparency, starting from antediluvian solutions, focusing on the compatibility of solutions with browsers, and also give specific examples of program code. And now to work!
Method 1. Antediluvian
When there were still weak computers and “abilities” were not developed, developers came up with their own way of creating a transparent background: using transparent pixels in turn with color ones. The block created in this way looked like a checkerboard when scaled, but at normal size it looked like some 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 ... a ready-made translucent image! For this, images saved in PNG-24 format are used. This 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:
- Internet Explorer 6 does not work with this technology, you need to write script code for it;
- You can't change background colors in css;
- If the image display function is disabled in the browser, 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 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 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%.
This post has come to an end. Subscribe to my blog and don't forget to invite your friends. Good luck with learning web languages! Bye Bye!
Description
Specifies the background color of an element. Although this property does not inherit properties from its parent, because the initial value is set to transparent, the background color of the child elements is the same as the background color of the parent element.
Syntax
background color:<цвет>| transparent | inherit
Values
transparent Sets a transparent background. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
This example uses three different ways to set the background color for web page elements. The result of the example is shown in Fig. one.
Rice. 1. Apply background-color
Object Model
document.getElementById("elementID ").style.backgroundColor
Browsers
Internet Explorer up to version 7.0 does not support the inherit value.
There is no direct way to set the transparency of a background image (at least for 2016) through CSS (including CSS 3). There are many workarounds for this problem.
Blending backgrounds
The simplest solution is to blend the two backgrounds (an image and a translucent color). This method is suitable if there is a background of the same type under the "transparent background image". this is not transparency at all, but its imitation by mixing the image with color. Set a double background consisting of a background image and the desired color with an alpha channel. After that, choose the most suitable blending mode and adjust the composition with the alpha channel of the color to the desired result.
Background: url("/images/img1.jpg"), rgba(255,255,255,0.9); background-blend-mode: color;
Adding a pseudo element
The best way to get what you want. We create a pseudo-element using the after pseudo-class. Available
#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; )
Hello. 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 work with graphic editors, you probably know that the rgb color mode is decoded as follows: 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.
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 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.
CSS uses the opacity property to create a transparent effect.
IE8 and earlier versions support an alternative property - filter:alpha(opacity=x) , where " x " can take a value from 0 to 100 , the smaller the value, the more transparent the element will be.
All other browsers support the standard CSS opacity property, which can take a value between 0.0 and 1.0 , the smaller the value, the more transparent the element will be:
Try »Hover transparency
The :hover pseudo-class allows you to change the appearance of elements when you hover over them with the mouse. We'll use this feature to make the image lose its transparency on hover:
Try »Background transparency
There are two possible ways to make an element transparent: the opacity property described above, and specifying an RGBA background color.
You may already be familiar with the RGB color representation model. RGB (Red, Green, Blue - red, green, blue) - a color system that determines the hue by mixing red, green and blue. For example, to set the text color to yellow, you can use any of the following declarations:
Color: rgb(255,255,0); color: rgb(100%,100%,0);
The colors specified with RGB will differ from the hex values we used before in that they allow the use of an alpha channel for transparency. This means that what is underneath will show through the background of an element with alpha transparency.
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 transparency value after the color value between 0.0 (fully transparent) and 1 (fully opaque).
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, i.e. the entire content of the element becomes transparent. And RGBA allows you to set transparency for individual parts of an element (for example, only 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=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 »
Note: RGBA values are not supported in IE8 and earlier. To declare a fallback color for older browsers that do not support color values with alpha channels, specify it first before the RGBA value: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
