Home > Developer > Web Develop
<style type= "Text/css" >
linear{ width:100%; Height: 600px; FILTER:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, Startcolorstr= #b8c4cb, endcolorstr= #f6f6f8); /*ie 6 7 8*/ background:-ms-linear-gradient (top, #fff, #0000ff); /* IE ten */ background:-moz-linear-gradient (top, #b8c4cb, #f6f 6F8) */* Firefox */ background:-webkit-gradient (linear, 0% 0, 0% 100%,from (#b8c4cb), to (#f6f6f8)); * Google */ background:-webkit-gradient (linear, 0% 0, 0% 100%, from (#fff), to (#0000ff) ); /* Safari 4-5, Chrome 1-9*/ background:-webkit-linear-gradient (top, #fff, #0000ff); /*safari5.1 Chrome 10+*/ background:-o-linear-gradIent (Top, #fff, #0000ff); /*opera 11.10+*/ </style> <body> <div class= "linear" ></div> </body> One, A little 俗态. If two years ago, the implementation of the "compatibility of the gradient effect" is not expected to be raised, that time, said the gradient background, most of the thought is IE gradient filter, other browsers have not yet supported, but in the CSS3 support increasingly perfect today, The gradient background effect for compatibility has become completely possible, and this article will show you how to implement a gradient background effect for compatibility. In many browsers, the Opera browser is not currently supported. This example effect is the same effect, that is, the vertical gradient, the starting color red, the end color blue, the end of the blue transparency is 0.5. Second, the gradient background under IE browser the use of IE gradient filter under IE browser gradient background. The following code: [CSS] filter:progid:dximagetransform.microsoft.gradient (Startcolorstr=red,endcolorstr=blue, gradienttype=1); Description: The filter code above has three parameters, in order: StartColorStr, EndColorStr, and GradientType. Where gradienttype=1 represents a horizontal gradient, gradienttype=0 represents a longitudinal transformation. Startcolorstr= "Color" represents the starting color of the gradient gradient, and endcolorstr= "color" represents the color at the end of the gradient. The above code realizes the red to blue gradient, but does not contain the transparency change, this is because IE does not currently support the Opacity attribute and the Rgba color, to realize the change of transparency under IE, or the need to use IE filter, IE transparency Filter function is more powerful, This power is similar to the use of css-gradient background gradients in Firefox or Safari browsers. For example, use the following: [CSS] filter:alpha (opacity=100 finishopacity=0Style=1 startx=0,starty=5,finishx=90,finishy=60) The meanings of each parameter are as follows: Opacity represents transparency, the default range is from 0 to 100, they are actually in percent form. In other words, 0 is completely transparent and 100 is completely opaque. finishopacity is an optional parameter that you can use to specify the transparency at the end if you want to set the transparency effect of the gradient. The range is also 0 to 100. Style is used to specify the shape characteristics of transparent areas: 0 for Uniform shape 1 for Line 2 for radial 3 for rectangles. StartX The x-coordinate at the beginning of the gradient transparency effect. Starty the y-coordinate at the beginning of the gradient transparency effect. finishx The x-coordinate at the end of the gradient transparency effect. finishy the y-coordinate at the end of the gradient transparency effect. In combination with the above, the code for realizing the red-blue vertical gradient with transparency changes under IE is as follows: [CSS] .gradient{ width:300px; height:150px; Filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1); -ms-filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1); } <div class= "gradient" ></div> third, the gradient background under the Firefox browser for Firefox browsing(Firefox 3.6+) The implementation of the gradient background requires the use of CSS3 gradient properties,-moz-linear-gradient properties, In the previous article I described in detail the implementation of Firefox3.6 under the gradient background, you are interested can be ruthlessly click here: CSS gradient CSS3 gradient in the use of Firefox3.6. I'm not going to go into specifics here, but for the implementation of the results mentioned at the beginning of this article, see the following code: [CSS] .gradient{ width:300px; height:150px; background:-moz-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5)); } <div class= "gradient" ></div> iv. chrome/ The gradient background implementation under the Safari browser for the WebKit core browser, such as the Chrome/safari browser under the gradient background is also using the CSS3 gradient method, css-gradient, specifically-webkit-gradient, There are some differences in the use of the Firefox browser. I have a very detailed introduction to this in the previous article, you can click here: CSS gradient gradient WebKit core browser use. Specific use is not detailed, see the following code: [CSS] .gradient{ width:300px; height:150px; background:-webkit-gradient (linear, 0 0, 0 bottom, from (#ff0000), to (RGBA (0, 0, 255, 0.5))); } <div class= "gradient" ></div> Added to 2011-04-07opera11 also supports CSS3 gradients. Its usage is consistent with Firefox and requires the use of-o-prefixes.In addition, Chrome's gradient usage is beginning to move closer to the usage of Firefox's browser. Five, comprehensive-compatibility of the gradient background effect related code is as follows: [CSS] .gradient{ width:300px; height:150px; Filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0); -ms-filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:DXImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/ background:red; /* Some browsers that do not support background gradients */ background:-moz-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5)); background:-webkit-gradient (linear, 0 0, 0 bottom, from (#ff0000), to (RGBA (0, 0, 255, 0.5))); background:-o-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5)); } <div class= "gradient"></div> Six, the conclusion CSS3 's potential is very large, on the gradient this piece can create a lot of exquisite UI effect, and previously these effects can only use the picture implementation. The implementation of CSS gradient background can effectively reduce the number of pictures on the page, that is, to reduce the HTTP request, is very useful. But the Internet Explorer has been squatting on the side of the latrine gnawing at the chicken leg-the delicious, the use of high-resource filters to achieve the gradient effect. So, for the time being, the application of the gradient background has yet to be weighed against the pros and cons.CSS Settings div background color gradient display
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
