jsp如何实现背景渐变色

发布时间：2020-09-17 10:55:44 作者：小新
来源：亿速云阅读：544

这篇文章将为大家详细讲解有关jsp如何实现背景渐变色，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

使一个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如何实现背景渐变色就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

jsp如何实现背景渐变色

相关阅读