使一個div曾的背景顏色出現漸變的，有的人使用美工切出來不同的色條，之後使用背景圖片填充repeat-x.這裡使用css控制顏色的漸變，但是要注意：此處需要解決瀏覽的兼容性問題
IE瀏覽器下的漸層背景
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
#相關說明：
上面的濾鏡程式碼主要有三個參數，依序是：startcolorstr, endcolorstr, 以及gradientType。其中gradientType=1代表橫向漸變，gradientType=0代表縱向淅變。 startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸層結尾的色彩。
上面程式碼實現的是紅色至藍色的漸變，但不含透明度變化，這是由於IE目前尚未支援opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。
Firefox瀏覽器下的漸層背景
對於Firefox瀏覽器下(Firefox 3.6 )漸進式背景的實作需使用CSS3漸變屬性，-moz- linear-gradient屬性，實現的效果的實作可以參考下面的程式碼：
<%@ 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>#chrome瀏覽器下的漸層背景實作
對於webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實作也是使用CSS3 漸變方法，css-gradient，具體為-webkit-gradient，使用語Firefox瀏覽器是有一些差異的。
<%@ 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>以上是jsp背景漸層色怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
