CSS 背景渐变

最新推荐文章于 2024-07-09 11:52:47 发布

liu_zhongjie

最新推荐文章于 2024-07-09 11:52:47 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css function class string border safari

本文链接：https://blog.csdn.net/liu_zhongjie/article/details/4496187

版权

CSS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=gbk">
<title>渐变背景</title>

var setGradient = (function(){

//private variables;
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;

//test if toDataURL() is supported by Canvas since Safari may not support it

   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;
   // Create gradients
   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;
   };
   //alert('your browser does not support gradient effet');
}
}
})();

</script>

<body>

<div id="example1" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>

<div id="example2" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretiu </div>

<div id="example3" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna </div>

<div id="example4" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interdum sit amet, </div>

<div id="example5" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>

<div id="example6" class="example">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>

</body>
</html>