Rumah > Artikel > hujung hadapan web > CSS 渐变背景的6个演示代码_页面背景

CSS 渐变背景的6个演示代码_页面背景

WBOYasal: 2016-05-16 18:43:381199semak imbas

<meta http-equiv="content-type" content="text/html; charset=gbk"> 
<title>CSS娓愬彉鑳屾櫙</title> 
<script> 
var setGradient = (function(){ 
    var p_dCanvas = document.createElement('canvas'); 
    var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function'); 
    var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null; 
    var p_isIE = /*@cc_on!@*/false; 
try{ p_dCtx.canvas.toDataURL() }catch(err){ 
p_useCanvas = false ; 
}; 
    if(p_useCanvas){ 
     return function (dEl , sColor1 , sColor2 , bRepeatY ){ 
            if(typeof(dEl) == 'string') dEl = document.getElementById(dEl); 
            if(!dEl) return false; 
            var nW = dEl.offsetWidth; 
            var nH = dEl.offsetHeight; 
            p_dCanvas.width = nW; 
            p_dCanvas.height = nH; 
            var dGradient; 
            var sRepeat; 
            if(bRepeatY){ 
                dGradient = p_dCtx.createLinearGradient(0,0,nW,0); 
                sRepeat = 'repeat-y'; 
            }else{ 
                dGradient = p_dCtx.createLinearGradient(0,0,0,nH); 
                sRepeat = 'repeat-x'; 
            }         
             
            dGradient.addColorStop(0,sColor1); 
            dGradient.addColorStop(1,sColor2);                 
             
            p_dCtx.fillStyle = dGradient ; 
            p_dCtx.fillRect(0,0,nW,nH); 
            var sDataUrl = p_dCtx.canvas.toDataURL('image/png'); 
             
            with(dEl.style){ 
                backgroundRepeat = sRepeat; 
                backgroundImage = 'url(' + sDataUrl + ')'; 
                backgroundColor = sColor2; 
            }; 
     } 
    }else if(p_isIE){ 
         
        p_dCanvas = p_useCanvas = p_dCtx = null;         
        return function (dEl , sColor1 , sColor2 , bRepeatY){ 
            if(typeof(dEl) == 'string') dEl = document.getElementById(dEl); 
            if(!dEl) return false; 
            dEl.style.zoom = 1; 
            var sF = dEl.currentStyle.filter; 
            dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(    GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join(''); 
    }; 
     
    }else{ 
        p_dCanvas = p_useCanvas = p_dCtx = null; 
        return function(dEl , sColor1 , sColor2 ){ 
             
            if(typeof(dEl) == 'string') dEl = document.getElementById(dEl); 
            if(!dEl) return false; 
            with(dEl.style){ 
             backgroundColor = sColor2; 
            }; 
        } 
    } 
})(); 
</script> 
<style> 
body{font:0.75em/1.4 Arial;text-align:left;margin:20px;} 
hr{clear:both;visibility:hidden;} 
xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid 1px #ccc;} 
div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 "Tahoma";text-align:justify;} 
</style> 
 
<div id="example1" class="example">鑴氭湰涔嬪</div>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：VBScript 实现文字遮罩_文字特效Artikel seterusnya：JavaScript 动态添加表格行使用模板、标记_javascript技巧

Artikel berkaitan

Lihat lagi