The IE, FireFox, and Opera browsers support CSS to implement Alpha transparency.

The IE, FireFox, and Opera browsers support CSS to implement Alpha transparency.

One: To solve the problem: in the ie6-ie11 compatible with the following transparent Upload File button effect. The implementation method is implemented through a filter.

Ii. below:

Iii. Code:

Style:

.file2 {position: absolute;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*ie 8*/filter: alpha(opacity=0);/*ie 5-7*/opacity:.0;/*opera9.0+,firefox1.5+,safari,chrome*/width: 30px;height: 20px;line-height: 20px;cursor: pointer;padding: 0;overflow: hidden;padding-top: 0px;}

<Pre class = "html" name = "code"> <em style = "width: 30px; height: 20px; line-height: 20px; overflow: hidden; font-style: normal; "> <input type =" file "class =" file2 "id =" filep _ $ {item. DM} "style =" border: none; "onchange =" upload (this, '$ {item. DM} '); "/> <a href =" javascript: void (0) "> upload </a> </em>

<Font style = "color: gray;"> Delete </font>

Zookeeper
Why is the prefix-moz-required for mainstream browsers such as Firefox ie that are transparent to css -?

Each attribute in the css standard also goes through the process from draft (WD) to recommendation (REC). The attribute progress in css is different. Browser vendors may be at risk in advance when the standards are not yet clear. In addition, some browser vendors may support well and some may not support well, so they should be differentiated by vendor prefixes.

The prefix of CSS3 is often used by a browser manufacturer. It implies that this CSS property or rule has not yet become part of W3C standards.

See what prefixes are available:
-Webkit
-Moz
-Ms
-O
For example, the code for a CSS3 rotation is:
-Webkit-transform: rotate (-3deg);/* Chrome/Safari */
-Moz-transform: rotate (-3deg);/* Firefox */
-Ms-transform: rotate (-3deg);/* IE */
-O-transform: rotate (-3deg);/* for Opera */
CSS3 prefix + standard code order

Since many prefixes need to be written in CSS3 code (temporarily), what is their order?

The answer is below explain

Write the private CSS3 attribute first, and then the standard CSS3 attribute.
-Webkit-transform: rotate (-3deg);/* Chrome/Safari */
-Moz-transform: rotate (-3deg);/* Firefox */
-Ms-transform: rotate (-3deg);/* IE */
-O-transform: rotate (-3deg);/* for Opera */
Transform: rotate (-3deg);/* is nothing */
Remove the CSS3 prefix

When can we remove the CSS3 prefix of an attribute?

The answer is still in the following example:

When an attribute becomes a standard and is generally compatible with the latest versions of Firefox, Chrome, and other browsers.
Taking border-radius as an example:
-Moz-border-radius: 12px;/* FF1-3.6 */
-Webkit-border-radius: 12px;/* Saf3-4, iOS 1-3.2, Android <1.6 */
Border-radius: 12px;/* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1 + */
FF4, Saf5, and Chrome all support the border-radius attribute, so we don't have to write the above two items. The Code becomes:
Border-radius: 12px;

Concerning the problem of parsing the double transparency of CSS transparent filters in IE browser: there is another DIV in the translucent DIV that needs to be translucent again

In general, the effect is 90% X 90% = 81%, that is, the transparency of the sub-div.
Two divs must be added with two transparent styles at the same time.
Parent div {filter: alpha (opacity = 90); opacity: 0.9 ;}
Sub div {filter: alpha (opacity = 90); opacity: 0.9 ;}