Home > Developer > JavaScript
CSS sets DIV background color gradient display, css div background gradient
<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 10 */background:-moz-linear-gradient (top, # b8c4cb, # f6f6f8);/* Firefox */background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (# b8c4cb), to (# f6f6f8);/* Google */background:-webkit-gradient (lin Ear, 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> 1. A somewhat unconventional opening remark was made two years ago., it is estimated that the "compatibility gradient effect" statement will not be proposed. At that time, when talking about the gradient background, most of the ideas were IE gradient filters, which were not yet supported by other browsers. However, with the increasingly sophisticated support for CSS3, it is completely possible to achieve a gradient background Effect of compatibility. It will show you how to implement a gradient background Effect of compatibility. Among the many browsers, opera browsers are currently not supported. The effects of this example are the same, that is, vertical gradient. The starting color is red, the ending color is blue, and the ending blue transparency is 0.5. Ii. Use IE gradient filter for gradient background in IE browser. Code: [css] filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradientType = 1); Note: The filter code above has three parameters: startcolorstr, endcolorstr, and gradientType. GradientType = 1 indicates a horizontal gradient, and gradientType = 0 indicates a vertical gradient. Startcolorstr = "color" indicates the color starting from the gradient, and endcolorstr = "color" indicates the color at the end of the gradient. The above code implements a gradient from red to blue, but does not include transparency changes. This is because IE does not currently support the opacity attribute and RGBA color, so we need to implement transparency changes under IE, you still need to use the IE filter. The IE transparency filter is powerful, which is similar to the css-gradient background gradient in Firefox or Safari. For example, use [css] filter: alpha (opacity = 100 finishopacity = 0 style = 1 startx = 0, starty = 5, finishx = 90, finishy = 60) the meanings of each parameter are as follows: opacity indicates transparency. The default range is from 0 to 100. They are actually percentages. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque. Finishopacity is an optional parameter. If you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100. Style is used to specify the shape features of the transparent area: 0 represents the unified shape 1 represents the linear 2 represents the radial 3 represents the rectangle. X coordinate at the beginning of the startx gradient transparency effect. Y coordinate at the beginning of the starty gradient transparency effect. The X coordinate at the end of the finishx gradient transparency effect. The Y coordinate at the end of the finishy gradient transparency effect. Based on the above, the Code for implementing the red-blue vertical gradient with transparency changes in 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 (start Colorstr = red, endcolorstr = blue, gradientType = 1 );} <div class = "gradient"> </div> 3. the gradient background in the Firefox browser must use the CSS3 gradient attribute to implement the gradient background in the Firefox browser (Firefox 3.6 +, -moz-linear-gradient attribute. In my previous article, I introduced the implementation of the gradient background in Firefox3.6. If you are interested, click here: CSS gradient CSS3 gradient is used in Firefox3.6. I will not go into detail here. For the implementation of the effects mentioned at the beginning of this article, refer to 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> 4. gradient background in chrome/Safari For webkit core browsers, for example, the implementation of gradient backgrounds in Chrome/Safari also uses the css 3 gradient method, css-gradient, specifically-webkit-gradient. There are some differences in the use of Firefox. I have provided a very detailed introduction to this in the previous article. You can click here: CSS gradient webkit core browser. The usage 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 that opera11 also supports CSS3 gradient. Its usage is the same as that of Firefox, And the prefix of-o-is required. In addition, Chrome's gradient usage also began to move closer to FireFox's usage. 5. Code related to the gradient background Effect of compatibility: [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 = 0);-ms-filter: alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolo Rstr = red, endcolorstr = blue, gradientType = 0);/* IE8 */background: red;/* browsers that do not support background gradient */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> 6. The potential of CSS3 is very great. You can create a lot of exquisite UI effects on the gradient, in the past, only images were used for these effects. The implementation of CSS gradient background can effectively reduce the number of images on the webpage, that is, it reduces HTTP requests, which is very useful. However, ie has been squatting in the toilet and licking chicken legs-think it is delicious, you have to use a high resource consumption filter to achieve gradient effect. Therefore, the application of the gradient background still needs to be weighed.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
