How to write jsp background gradient color

To make the background color of a div appear gradient, some people use artists to cut out different color bars, and then use the background image to fill repeat-x. Here, CSS is used to control the color gradient, but please note: This is required Solve browsing compatibility issues

Gradient background under IE browser

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

Related instructions:

The above filter code mainly has three parameters, in order: startcolorstr, endcolorstr, and gradientType. Among them, gradientType=1 represents a horizontal gradient, and gradientType=0 represents a vertical gradient. startcolorstr="color" represents the starting color of the gradient, endcolorstr="color" represents 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 currently does not support the opacity attribute and RGBA color. To achieve transparency changes under IE, you still need to use IE filters. Mirror, IE's transparency filter function is relatively powerful. This power is similar to the usage of css-gradient background gradient in Firefox or Safari browsers.

Gradient background under Firefox browser

For the implementation of gradient background under Firefox browser (Firefox 3.6), you need to use the CSS3 gradient attribute, -moz- For the linear-gradient attribute, you can see the following code to achieve the effect:

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    
    <style>
        .gradient{
            width:300px;
            height:150px;
            background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        }
        </style>
    
    
        <div></div>
    

Gradient background implementation under chrome browser

For webkit core browsers, For example, the implementation of gradient background in Chrome/Safari browser also uses the CSS3 gradient method, css-gradient, specifically -webkit-gradient. There are some differences in the language used in Firefox browser.

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    
    <style>
        .gradient{
            width:300px;
            height:150px;
            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
        }
        </style>
    
    
        <div></div>
    

The above is the detailed content of How to write jsp background gradient color. For more information, please follow other related articles on the PHP Chinese website!