JS to achieve a variable background transparency, the effect of opaque text

Recent projects need to implement such a function, similar to the online chat box, the background is transparent, but the text is opaque. Therefore, if the simple use of opacity (non IE) and alpha filter (IE) is not able to achieve this effect, will cause full transparency.

The solution is as follows:

1. Achieving full transparency:

Set background to transparent, two browsers universal

2. Achieving transparency can be adjusted:

Required to change the transparency, where IE and non-IE need to be handled separately

Non-IE browsers can be handled by supporting CSS3 (not supported by the CSS3 here ignored), CSS is the writing is

Background-color:rgba (255,255,255,0.5)

The first 3 parameters are RGB and the last one is transparency

IE browser needs to use the gradient filter, CSS writing is

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #00ffffff, endcolorstr= #00ffffff)

Excerpt CSS Manual description usage:

Grammar:

Filter:progid:DXImageTransform.Microsoft.Gradient (enabled= benabled, startcolorstr= iwidth, endcolorstr= iwidth)

Property:

Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False true: Default value. Filter activation.

False: Filters are prohibited.

STARTCOLORSTR: Options available. String. Sets or retrieves the start color and transparency of a color gradient.

The format is #AARRGGBB. AA, RR, GG, BB are 16 positive integers. The value range is 00–ff. RR specifies a red value, GG specifies a green value, BB specifies a blue value, see #RRGGBB color unit. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values that exceed the range of values are restored to their default values.

The value range is #FF000000 – #FFFFFFFF. The default value is #FF0000FF. Opaque Blue.

ENDCOLORSTR: Options available. String. Sets or retrieves the end color and transparency of a color gradient. See StartColorStr properties. The default value is #FF000000. Opaque black.

Characteristics:

Enabled: can read and write. A Boolean value (Boolean). See the Enabled property.

GradientType: can read and write. Integer value (integer). Sets or retrieves the direction of a color gradient. 1 | 0 1: Default value. Horizontal gradient.

0: Vertical gradient.

STARTCOLORSTR: can read and write. String. See StartColorStr properties.

StartColor: can read and write. Integer value (integer). Sets or retrieves the start color of a color gradient. The value range is 0–4294967295. 0 is transparent. 4294967295 is opaque white.

ENDCOLORSTR: can read and write. String. Sets or retrieves the end color and transparency of a color gradient. See StartColorStr properties. The default value is #FF000000. Opaque black.

EndColor: can read and write. Integer value (integer). Sets or retrieves the end color of a color gradient. The value range is 0–4294967295. 0 is transparent. 4294967295 is opaque white. When you use this attribute in a script, you can also use hexadecimal format: 0xAARRGGBB.

Description

Displays a custom color layer between the object's background and content.

When this effect is displayed by a transition, the textual initialization of the text above the color layer of the gradient book is transparent, and when the color gradient is implemented, the text color is updated with its defined value.

3. Complement the perfect support IE6 and IE7

This is a little bit of a problem in IE7 and IE6, because when you use the transparent background, the mouse can actually point to the content behind the transparent layer ... It can also cause some of the events to be effective. The solution is to put a div on the outside and add a completely transparent background (PNG) to it, and write it as a reference:

Background:url (' transparent.png ')!important;background:none;_filter:progid:d XImageTransform.Microsoft.AlphaImageLoader (src= ' transparent.png ', sizingmethod= ' scale ')

So inside the nested div Click will not point to the outermost content. Of course, not IE will not need to add this.

In addition, for the browser does not support CSS3, there is a solution is to the background layer and display the text of the layer separate processing, placed at the same level, just through the adjustment of the position to do appear to have a hierarchical relationship, so that the use of transparent effects directly do not have an impact on the text.

Add:

IE6, the above method is still ineffective, the solution is a layer of IFRAME, in the HTML code can be so written:

<div><br><!–[if LTE IE 6.5]><iframe id= "Ie6_filter style=" position:absolute;left:0px;top:0 Px;z-index:-1;filter:mask ();d isplay:block;width:100%;height:100%; " ></iframe><! [Endif]–><br></div>