CSS transparency setting method and frequently asked question resolution

May 04, 2021 CSS

1. How to set the transparency of the background in the CSS style

2. Use javascript or jquery in CSS to implement transparency changes

3. CSS Transparency Tips Summary

4. Third, CSS transparency under IE

5. How does CSS change the background transparently without changing the child element transparency?

6.. Instance

7.. CSS sets the layer of transparency, how to make the layer inside opaque

8.. Instance

9.. How to write transparent styles in css

After reading "css image transparency/opaque" in the w3cschool "css tutorial", you may already have a basic understanding of translucent colors in CSS, CSS transparency is a fairly popular technology, but in cross-browser support, it can be said to be a headache for developers. T here is currently no common way to ensure that transparency settings work on all browsers currently in use, but in general it is a huge change. /b16>With regard to CSS transparency, it is important to note that although it has been in use for many years, it has not been a standard attribute, it is a non-standard technology and should be part of the CSS3 specification.

CSS transparency setting method and frequently asked question resolution

How to set the transparency of the background in the CSS style

Here's a specific example of how to set the transparency of the background in a CSS style. Make the layer of the class box transparent.

.box{

width:300px;

height:200px;

margin:0 auto;

boxder:1px solid #ccc;

background:#000;

filter:alpha(opacity:30);

opacity:0.3;

color:red;}

Try it out . . .

Where background: #000; f ilter:alpha(opacity:30); o pacity:0.3; For critical code, when the opacity value is 1, it is completely opaque, and 0 indicates complete transparency.

Other properties are described below:
opacity: 0.3; This is "most important" because it is the current standard in CSS. T his will work in most versions of Firefox, Safari, and Opera. T his will be everything you need if all browsers support the current standard. Of course they can't be wrong.

filter:alpha(opacity=30); This one is for Internet Explorer

-moz-opacity:0.3; You need this one to support older versions of Mozilla browsers such as Netscape Navigator.

-khtml-opacity: 0.3; This is an older version of Safari (1.×) when the rendering engine is still called kthml, not the current WebKit.

Use javascript or jquery in CSS to implement transparency changes

How do I use CSS for background translucation? Our general practice is to use two layers, one for text and the other for a transparent background, because the effect of transparent filters affects the contents.

But if you only need to implement under IE, there are many scenarios for using CSS for transparency, and here's just a general approach:

.transparent_class {

FILTER: Alpha (Opacity = 50); // Standard CSS transparency, in most standard browser Firefox, Safari, and Opera is valid

Opacity: 0.5; // Compatible IE Solution

-Moz-Opacity: 0.5; // Old Mozilla Browsers such as NetscapeAvigator. Almost no need

-khtml-opacity: 0.5; // is compatible with the old Safari (1.x) version, very few can not be}

Knowing how CSS changes transparency, it's easy to dynamically change transparency using javascript:

window.onload =function(){

var myDiv = document.getElementById("transparent_div");

myDiv.onclick =function(){

mydiv.style.opacity = ". 4"; // For all universal browsers

MyDiv.style.filter = "alpha (opacity = 40)"; // For IE browser}}

</script>

Try it out . . .

jQuery changes the transparency implementation as follows:

$(document).ready(function(){

$("#btn1").click(function(){

$("#box").animate({opacity:"0"});});

$("#btn2").click(function(){

$("#box").animate({opacity:"1"});});});

Try it out . . .

CSS Transparency Tips Summary

First, the old Opacity settings

The following code is the transparency setting required for older versions of Firefox and Safari:

#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

-khtml-opacity setting is for the old version of the Webkit rendering engine, which is now outdated, unless you still need to be compatible with Safari 1.x.x.

The second line uses the dedicated property -moz-opacity to be compatible with earlier versions of the Mozilla rendering engine, as well as trace back to Netscape Navigator. T he -moz-opacity property is not required after Firefox 0.9, and Firefox 3.5 (now using the Gecko engine) no longer supports this property.

CSS transparency under Firefox, Safari, Chrome and Opera

The following code is the simplest, most recent opacity setting of CSS syntax for all current browsers except IE:

#myElement { opacity: 0.7; }

The above syntax sets an element to 70% opaque (or 30% transparent). S etting opacity:1 will make the element opaque, and setting opacity:0 will make the element completely invisible. It's easy to remember that the smaller the opacity value, the closer it is to transparency if you remember that "opacity" is equivalent to "opacity."

The opacity attribute can be exactly two places behind the scale, so values of ".01" and ".02" are actually different, although visibility is difficult to notice. In general, it is possible to be accurate to one place, taking values such as ".3" or ".7".

Third, CSS transparency under IE

IE is business as usual from other browsers, and there are currently three different versions of IE in widespread use, transparency settings are different and sometimes require additional CSS to control:

#myElement { filter: alpha(opacity=40); }

The CSS above uses dedicated filter properties to set IE6-8 transparency. F or IE6 and IE7, it is important to note that for transparent settings to take effect, elements must be "layout". An element can be laid out by using some CSS properties, such as width andposition.

Another way to set CSS transparency for IE8 is as follows:

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);

/ * The first line is valid under IE6, IE7 and IE8 * /

-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”;

/ * The second line is only valid in IE8 * /}

The first line of code is for all current IE versions, and the second line is for IE8 only.
Notice the difference between the two lines of code: in the second line of code, the filter property is followed by the -ms-prefix, and the property values are quoted, which is necessary for syntax.

To be honest, with the syntax of alpha in the previous example, after any laid-out element under any version of IE, it is not necessary to use the "progid" method

How does CSS change the background transparently without changing the child element transparency?

In general, we can use the opcity property of css to change the transparency of an element, but the transparency of child elements under its elements is also changed, even if it is useless to redefine child elements, for example:

Try it out . . .

The transparency of the text element is also 0.4. S o think about it if there's a way to solve this problem by changing.

Method 1: Use a transparent picture as a background to achieve results, but is there an easier way?

Method 2: Use RGBA.

For example:

Try it out . . .

CSS sets the layer of transparency, how to make the layer inside opaque

The CSS code set up on the outer DIV is as follows

opacity: 0.8;

-moz-opacity: 0.8;

filter: alpha(opacity=80);

Try it out . . .

But the layers inside this layer are transparent, how to make the layers inside opaque?

Method:

If it's a color, it's perfectly possible to replace opacity with a background transparent rgba.
If it's a picture, just use ps for a simple process.
opacity This property specifies that transparency includes the elements inside, and it is not possible to have only outside transparency, which is opaque inside

How to write transparent styles in css

Filters are required if you are using styles
style="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"

Description:
Opacity: Starting values, 0 to 100, 0 for transparency, 100 for the original figure.
FinishOpacity: Target value.
Style: 1 or 2 or 3
StartX: Any value
StartY: Any value

The syntax is as follows:

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

But because of the filter compatibility issues, it is best not to use, you can use ps to do the diagram, the background to adjust the transparency into the png format of the picture on the line, if the transparent background color is the same, then you can cut into 1px 1px-sized png picture tile, gif only supports transparency 100%, that is, completely transparent pictures, translucent does not support, and png format pictures are not a problem, the only problem is that IE6 is not compatible with transparency The png format is just that.

CSS transparency setting method and frequently asked question resolution

Table of contents

How to set the transparency of the background in the CSS style

Use javascript or jquery in CSS to implement transparency changes

CSS Transparency Tips Summary

Third, CSS transparency under IE

How does CSS change the background transparently without changing the child element transparency?

CSS sets the layer of transparency, how to make the layer inside opaque

How to write transparent styles in css

Cookie Consent