Make use of CSS to summarize background transparency and text opacity effects

The use of transparent and opaque styles has long been popular in the course of project development. By now we are very familiar with the effect, transparency effect is not only on the picture, there are all kinds of places are used to, with CSS can be very simple to implement a variety of browser compatibility settings. Sometimes use the background map to put some text introduction, need to have the background picture transparent and text opaque effect. In the following chapters, let's talk about the use of CSS to achieve a transparent background image and text opaque effect.

Background transparency and text opacity effects

1. Using CSS to achieve transparent background images and text opaque two ways

Method One (frosted glass effect): Background image + Pseudo class + Flite:blur (3px)

Method Two (translucent effect): Background map + positioning + Background:rgba (255,255,255,0.3)

CSS to achieve a transparent background picture, text opacity effect of two ways

2. CSS for transparent background, text opaque (compatible with each browser)

In newer browsers such as Ff/chrome, you can use the CSS properties Background-color Rgba to easily achieve background transparency, while text remains opaque. The Ie6/7/8 browser does not support RGBA, only the use of IE's exclusive filter filter:alpha to achieve, but this writing will also make the text transparent, so only in the transparent container child nodes (except the text node) set position: Relative can not inherit the transparent filter of its parent element.

3. CSS to implement background transparency and text opaque method

There are 3 ways to implement a transparent CSS method, and the following is a 80% notation for opacity

The value of CSS3 's opacity:x,x is from 0 to 1, such as opacity:0.8

CSS3 Rgba (red, green, blue, alpha) with alpha values from 0 to 1, such as RGBA (255,255,255,0.8)

IE exclusive filter filter:alpha (OPACITY=X), x value from 0 to 100, such as Filter:alpha (OPACITY=80)

4. Resolve CSS settings background transparent, text opaque

To set the transparency of an element:

-moz-opacity:0.8; /* Set element transparency in Firefox

Filter:alpha (opacity=80); /*ie using filters to set transparency

But when we set the transparency of the background to a label, we don't want the text image on the label to become translucent.

5. Implement CSS3 opacity complete code

Value Description:

1. <alphavalue>| is a length value consisting of a floating-point number and a unit identifier. cannot be negative, the default value is 1.opacity with a value of 1 o'clock, the element is completely opaque, and conversely, the value is 0 o'clock, the element is completely transparent, not visible.

2, inherit represents inheritance, that is, inherit the opacity of the parent element.

3, for IE browser, you can use its Private property filter to be compatible with: Filter:alpha (Alpha=value);.

Related questions

1. CSS to achieve transparent background content opaque

2. Canvas background is opaque, but inside an element is transparent (like a hollow effect)

3. How to find CSS background transparency and text opacity

"Recommended"

1. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"

2. PHP Chinese web related article: a summary of the translucent settings in CSS