Home >Java >javaTutorial >How to write jsp background gradient color
How to write jsp background gradient color
- (*-*)浩Original
- 2019-05-29 13:28:324523browse
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:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
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.
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>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!