利用css3屬性gradient實現背景顏色線性漸變

時間 2020-02-04

標籤利用 css3 css 屬性 gradient 實現背景顏色線性漸變欄目 CSS 简体版

原文原文鏈接

前幾天羣裏有同窗在諮詢利用CSS怎麼使背景顏色產生漸變，要求必須兼容IE7，IE8,這就有點頭疼了，現代瀏覽器IE9+，Chrome,Friefox均都支持CSS3屬性gradient，實現起來就很簡單，通過一翻調試，終於幫這位同窗解決了問題，下邊給出完整的解決方案。
在線DEMO
兼容性：IE7+，Chrome,Friefox
完整代碼以下：php

<!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>

我的觀點：爲了要一個通用的背景漸變要寫六行代碼，不見得比圖片省事，要麼也能夠結合後端語言作一個功能，輸入漸變的起始顏色與結束顏色後生成以上代碼。各有所長，看項目須要吧！css

轉載請註明：前端錄»利用css3屬性gradient實現背景顏色線性漸變
轉載於猿2048:➤《利用css3屬性gradient實現背景顏色線性漸變》html