Find the effect. CSS3opacity is a transparent attribute. how does one make the left and right sides of a DIV transparent slowly and the middle is not transparent? This is the value of opacity. it is impossible for me to divide it into N divs and set different opacity values 0.10.30.50.70.91111111111111110.90.70.50.30.1.
CSS3 opacity is a transparent property,
How can we make the left and right sides of a DIV slowly transparent, and the middle is not transparent?
The opacity value is like this. it is impossible for me to divide it into N divs and set different opacity values.
0.1 0.3 0.5 0.7 0.9 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0.9 0.7 0.5
Who has done this .. That is to say, gradient transparency is required.
------ Solution --------------------
Http://www.zhangxinxu.com/wordpress/2010/04/css%E5% AE %9E%E7%8E%B0%E5%85%BC%E5% AE %B9%E6%80%A7%E7%9A%84%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AFgradient%E6%95%88%E6%9E%9C/
Just change it.
------ Solution --------------------
Alpha attribute
Alpha is used to set transparency. Let's take a look at its expression format:
Filter: alpha (opacity = opcity, finishopacity = finishopacity, style = style, startX = startX, tartY = startY, finishX = finishX, finishY = finishY)
Wow, why is it so long. Yes, but these parameters have their own advantages.
Opacity indicates the transparency level. the optional values range from 0 to 100. 0 indicates full transparency, and indicates full Opacity. The Style parameter specifies the shape features of the transparent area. 0 represents a uniform shape; 1 represents a linear shape; 2 represents a radial shape; 3 represents a rectangle.
Finishopacity is an option used to set the transparency at the end to achieve a gradient effect. its value also ranges from 0 to 100. StartX and StartY represent the starting coordinates of the gradient transparency effect, and finishX and finishY represent the ending coordinates of the gradient transparency effect.
From the above, we can see that if you do not set the transparent gradient effect, you only need to set the opacity parameter. Let's look at an instance (see) after talking about it so much ):
------ Solution --------------------
Divide p into two halves. Haha
------ Solution --------------------
Set three p values so that the p values on both sides remain unchanged. The following is a p gradient:
HTML code
CSS gradientThe gradient generated by CSS. Source code from: fire download http://www.veryhuo.com/down
If not, press Ctrl + F5 to refresh this page, more page code: http://www.veryhuo.com/</a>
------ Solution --------------------
You can do this through gadient, ie won't ..
Http://jsbin.com/amujel/edit#html,live
------ Solution --------------------
Discussion
This is also true.
This is how it works. it's the same as those on the upstairs. it's just the background color gradient.
Is transparent gradient, the left and right sides of the transparent to see something. It's not just a background color change.
Reference:
You can do this through gadient, ie won't ..
Http://jsbin.com/amujel/edit#html,live
------ Solution --------------------
Simply put, let the artist produce a PNG mask with a transparent gradient.
------ Solution --------------------
HTML code
Js fade-in and fade-out
Demonstrate Windows fade-in and fade-out Windows
Script (function (o, I, s) {I = 1; s = 0.01; setInterval (function () {I + = s; s = I <0? 0.01 :( I> 1? -0.01: s); if (o. filters) o. filters [0]. opacity = I * 100; else o. style. opacity = I ;}, 1) ;}( document. getElementById ("w"); script
