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

web前端|js教程 CSS 渐变背景的6个演示代码_页面背景

CSS,渐变背景

web前端-js教程

微信群发布网站源码,流畅运行ubuntu配置,阿里云怎么装tomcat,typecho 爬虫记录,php编程项目,seo初学者入门教程排名lzw

<br /><title>CSS渐变背景</title> 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’;             }         <div class="khw">易语言扁平化皮肤模块源码,ubuntu主题美化下载,tomcat7大小,java 爬虫  rss,php解压缩并覆盖,神湾seo优化lzw</div>            dGradient.addColorStop(0,sColor1);             dGradient.addColorStop(1,sColor2); <div class="khw">sns交友源码 国际,ubuntu更换桌面系统,tomcat临时文件过多,知乎爬虫招聘,kka9333 php中文网,淄博seo报价lzw</div>            p_dCtx.fillStyle = dGradient ;             p_dCtx.fillRect(0,0,nW,nH);             var sDataUrl = p_dCtx.canvas.toDataURL(‘image/png’); </p><p>            with(dEl.style){ backgroundRepeat = sRepeat; backgroundImage = ‘url(‘ + sDataUrl + ‘)’; backgroundColor = sColor2;             };      }     }else if(p_isIE){ </p><p>        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(”);     }; </p><p>    }else{         p_dCanvas = p_useCanvas = p_dCtx = null;         return function(dEl , sColor1 , sColor2 ){ </p><p>            if(typeof(dEl) == ‘string’) dEl = document.getElementById(dEl);             if(!dEl) return false;             with(dEl.style){              backgroundColor = sColor2;             };         }     } })();  </p> 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;} <p> </p><div id="example1" class="example">脚本之家（jb51.net）提供JavaScript/CSS特效代码。</div><div id="example2" class="example">脚本之家各类编程源码、 </div><div id="example3" class="example">提供各类编程源码</div><div id="example4" class="example">脚本之家（jb51.net） </div><div id="example5" class="example">jb51.net </div><div id="example6" class="example">脚本之家 </pre> setGradient(‘example1′,’#4ddbbe’,’#d449cc’,1); setGradient(‘example2′,’#46ddbd’,’#d8b617′,0); setGradient(‘example3′,’#c81fc1′,’#bf445f’,1); setGradient(‘example4′,’#2285e5′,’#d769eb’,0); setGradient(‘example5′,’#8b4286′,’#eac87d’,1); setGradient(‘example6′,’black’,’white’,0); <br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

渐变背景