CSS opacity property: controls transparency. Translucent background
Using CSS You can set transparency in two ways. Using the property opacity or properties rgba.
Opacity- Determines the level of transparency of a web page element. With partial or full transparency, the element shows through background picture or other elements located below a translucent object.
Syntax opacity: valueThe degree of transparency is set in the range 0 (completely transparent) to 1 (completely opaque).
For example, we need our image to be half transparent
Adding styles
Img1 ( Opacity: 0.5; /* Element translucency */ )
But unfortunately, not all browsers support opacity yet. For full cross-browser compatibility we use:
Img1( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 and below */ -khtml-opacity: 0.5; /* Konqueror 3.1 , Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ )
Also, it may not work on IE if not specified width(width) or height(height).
The RGBA property allows you to set background color with alpha channel. The alpha channel determines the transparency of an element.
A value of 0 is fully transparent, 1 is opaque, and intermediate value like 0.5 - translucency.
Syntax rgba: valueLet's say we need text with a transparent background.
Our text
Body ( background-image: url(http://g.io.ua/img_aa/large/3228/01/32280132.jpg) ) .rgba ( font-size: 50px; color: rgb(0, 0, 0) ; background-color: rgba(256,256,256, 0.5); width: 300px;
Differences between opacity and rgba
opacity affects the entire block, including the text. Creates a new overlay context. Child tags cannot be brighter than the parent element.
rgba affects only a specific property. In this case, it allows you to see through the background and does not make the text transparent.
Property CSS opacity is responsible for the transparency of elements (pictures, text, blocks) in html.
CSS opacity syntax
Where value can take real values in the range from 0.0 to 1.0. A value of 1.0 means no transparency (default).
Example No. 1. Transparent image in html
The first image is displayed without transparency, the second with transparency 0.5
Element translucency
Make the image translucent on hover!
DemoDownload sourcesThank you for your attention!
Next article
How to create div block with scrolling?Determines the transparency level of a web page element. When the element is partially or fully transparent, the background image or other elements located below the translucent object show through.
Brief information
Designations
×
Description Example <тип> Indicates the type of the value. <размер> A && B The values must be output in the order specified. <размер> && <цвет> A | B Indicates that you need to select only one value from the proposed ones (A or B). normal | small-caps A || B Each value can be used independently or together with others in any order. width || count Groups values. [ crop || cross ] * Repeat zero or more times. [,<время>]* + Repeat one or more times. <число>+ ? The specified type, word, or group is optional. inset? (A, B) Repeat at least A, but no more than B times. <радиус>{1,4} # Repeat one or more times separated by commas. <время># Values
The value is a number from the range. A value of 0 corresponds to full transparency of the element, 1, on the contrary, to its opacity. Fractional numbers type 0.6 sets translucency. It is allowed to write numbers without a leading zero, like opacity: .6.
Sandbox
Winnie the Pooh was always not averse to a little refreshment, especially at eleven in the morning, because at that time breakfast had long ended, and lunch had not yet begun. And, of course, he was terribly happy to see that the Rabbit was taking out cups and plates.
div (opacity: 1; )
Example
opacity
Result this example shown in Fig. 1.
Rice. 1. Result of using opacity
Object model
Object.style.opacity
Note
Firefox before version 3.5 supports the -moz-opacity property.
Internet Explorer up to version 9.0 uses filters to change transparency; for this browser you should write filter : alpha(opacity=50) , where the opacity parameter can take a value from 0 to 100.
Specification
Each specification goes through several stages of approval.
×
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
In this lesson we will look at 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 transparency Opacity
Digital value for opacity set in the range from 0.0 to 1.0, where zero is complete 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 kept in mind that opacity propagates to all child elements of the parent. This means that text on a translucent background will also be translucent. And this is a very significant drawback; the text does not stand out so well.
Transparency via CSS Opacity
The screenshot clearly shows that the black text has become as translucent as the blue background.
Div (
background: url(images/yourimage.jpg); /* Background image */
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: #027av4; /* Translucent 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 for the property opacity. R (red), G (green), B (blue)- means: red, green, blue. Last letter A– means alpha channel, which sets transparency. RGBA unlike Opacity does not affect child elements.
Now let's look at our example using RGBA. Let's replace these lines in the 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 the RGBA example:
The second screenshot looks much better than the first.
By playing with the translucency of the background of blocks, you can achieve interesting effects on your website. It is important that these translucent blocks go on top of a colorful 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 advent of any CSS3, it was implemented purely in graphic programs.
If the customer requires that the layout looks good in older versions of the browser Internet Explorer, then add the property filter and don't forget to comment out so that the validity of the code is not affected.
Conclusion
Format RGBA support all modern browsers, except Internet Explorer. It is also very important that RGBA flexible, it acts only on a specific specified element, without affecting its children. It is clear that this is more convenient for the layout designer. My choice is definitely 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.