jsp如何實(shí)現(xiàn)背景漸變色

發(fā)布時(shí)間：2020-09-17 10:55:44 來源：億速云閱讀：540 作者：小新欄目：編程語言

這篇文章將為大家詳細(xì)講解有關(guān)jsp如何實(shí)現(xiàn)背景漸變色，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

使一個(gè)div曾的背景顏色出現(xiàn)漸變的，有的人使用美工切出來不同的顏色條，之后使用背景圖片填充 repeat-x.這里使用css控制顏色的漸變，但是要注意：此處需要解決瀏覽的兼容性問題

IE瀏覽器下的漸變背景

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

相關(guān)說明：

上面的濾鏡代碼主要有三個(gè)參數(shù)，依次是：startcolorstr, endcolorstr, 以及gradientType。其中g(shù)radientType=1代表橫向漸變，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸變漸變起始的色彩，endcolorstr=”色彩” 代表漸變結(jié)尾的色彩。

上面代碼實(shí)現(xiàn)的是紅色至藍(lán)色的漸變，但是不含透明度變化，這是由于IE目前尚未支持opacity屬性以及RGBA顏色，要實(shí)現(xiàn)IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強(qiáng)大，這種強(qiáng)大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸變的用法類似。

Firefox瀏覽器下的漸變背景

對于Firefox瀏覽器下(Firefox 3.6+)漸變背景的實(shí)現(xiàn)需使用CSS3漸變屬性，-moz-linear-gradient屬性，實(shí)現(xiàn)的效果的實(shí)現(xiàn)可以參見下面的代碼：

<%@ 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瀏覽器下的漸變背景實(shí)現(xiàn)

對于webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸變背景的實(shí)現(xiàn)也是使用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>

關(guān)于jsp如何實(shí)現(xiàn)背景漸變色就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

jsp如何實(shí)現(xiàn)背景漸變色

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽