前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

利用css3属性gradient实现背景颜色线性渐变

css3

前几天群里有同学在咨询利用CSS怎么使背景颜色产生渐变,要求必须兼容IE7,IE8,这就有点头疼了,现代浏览器IE9+,Chrome,Friefox均都支持CSS3属性gradient,实现起来就很简单,经过一翻调试,终于帮这位同学解决了问题,下边给出完整的解决方案。

在线DEMO

兼容性:IE7+,Chrome,Friefox

完整代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用css属性gradient实现背景颜色线性渐变</title>
    <style type="text/css">
        .container1{width:500px;margin:50px auto 0 auto;}
        .box { 
            width:500px;
            height:250px;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/
            background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
            background: -o-linear-gradient(top, #eee, #aaa);/** Opear **/ 
            background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);/** IE9 IE10 **/ 
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/ 
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/ }
    </style>
</head>
<body>
    <div class="container1">
        <div class="box">
        </div>
    </div>
</body>
</html>

 个人观点:为了要一个通用的背景渐变要写六行代码,不见得比图片省事,要么也可以结合后端语言做一个功能,输入渐变的起始颜色与结束颜色后生成以上代码。各有所长,看项目需要吧!



转载请注明:前端录»利用css3属性gradient实现背景颜色线性渐变