Home > Web Front-end > HTML Tutorial > Thoughts on opacity_html/css_WEB-ITnose

Thoughts on opacity_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:57:04
Original
986 people have browsed it

Today when I was encapsulating the image carousel plug-in, I came up with this little thought of opacity.

My idea of ​​​​this carousel is not the previous Baidu input judge network setting the outer container overflow to hidden, position to relative, use setInterval to define a cycle time, and then change the top value according to the height of the picture.

Instead, use opacity to switch the display of the corresponding image.

Let’s talk about the compatibility issue of this opacity first

Css code

  1. filter:alpha(opacity=60);
  2. -moz-opacity:0.6;
  3. opacity:0.6

We know that you still need to render the index (the corner mark in the right or left corner, as for clicking to switch or moving the mouse to switch this, you design) when designing the carousel, as long as the correspondence is met---- Every time the carousel is switched, the index of cur will be compared and it will be ok. (I personally recommend giving clearTimeout to restart the calculation after clicking or moving the mouse )

1. If you have consulted the w3c documentation you will know (for IE only),

filter attribute allows us to add style effects to text and images (ps: Note the use of filter attribute , please always specify the width of the element )

Someone else has written before that when setting opacity in IE6 and IE7, this element must be "layout" (meaning that the width is set and the width is strictly Position)

2. -moz-opacity: attribute is for compatibility with earlier versions of Mozilla. It is said that FF0.9 no longer requires the use of this attribute. My ff 3.6.23 has directly displayed the opacity attribute

3. Some people may also think of this -khtml-opacity attribute, here I am It is not added because it is said that it will be added when Safari 1.x needs to be compatible.

A brief introduction to opacity.

The plug-in is done, but I have left a problem. When many people encapsulate the plug-in, it is like a page with only one DOM. matrix. Is everything rendered? Or to increase the outline or flesh of the mother body, the script only operates and controls it. . . . . . .

Post a compatible picture:

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template