JS CSS实现的漂亮渐变背景特效代码(6种渐变效果)

本文描述了用JS CSS实现的漂亮的渐变背景特效代码。分享给大家参考，如下：

运行效果截图如下：

具体代码如下：

超文本标记语言标题射流研究…配合半铸钢钢性铸铁(铸造半钢)实现的漂亮渐变背景特效6个实例/title脚本var set grade=(function(){ var p _ dCanvas=document。create element(' canvas ')；var p_useCanvas=！(p _ DCanVAs的类型。GetContext)=' function ')；var p_dCtx=p_useCanvas？p _ dcanvas。get context(' 2d '): null；var p _ ISie=/* @[电子邮件保护]*/false；请尝试{ p _ dctx。帆布。todaytaul()} catch(err){ p _ useCanvas=false；};if(p _ useCanvas){返回函数(DEl，sColor1，sColor2，bRepeatY){ if(类型为(DEl)=' string ')DEl=document。getelementbyid(DEl)；if(！(dEl)返回falsvar Nw=DEl . offsetidthvar nH=DEl . offsetheightp _ dcan vas . width=NWp _ dcan vas . height=NHvar dGradientvar sRepeatif(bRepeatY){ dGradient=p _ dctx。createlinegradient(0，0，nW，0)；s repeat=' repeat-y '；} else { dGradient=p _ dctx。createlinegradient(0，0，0，NH)；s repeat=' repeat-x '；} dGradient.addColorStop(0，Scor 1)；dGradient.addColorStop(1，Scor 2)；p _ dctx . fill style=dGradientp _ dctx . fill rect(0，0，nW，NH)；var sdataull=p _ dctx。帆布。todaytaurl(' image/png ')；带(DEl。style){ background repeat=sre peet；background IMage=' URL(' SDATOUll ')'；background COlOr=Scor2 }；} } else if(p _ ISie){ p _ DCanVAs=p _ UseCanvas=p _ DCTx=null；返回函数(dEl，sColor1，sColor2，bRepeatY){ if(类型为(DEl)=' string ')DEl=document。getelementbyid(DEl)；if(！(dEl)返回假声。风格。zoom=1；var Sf=DEl。CurrentStyle。过滤器；德尔。风格。filter=' '[' progid : maximagettransform .微软。渐变(渐变TYPe='，(！bRepeatY)，'，enabled=true，startColorstr='，sColor1 '，endColorstr='，sColor2 '，)'].join(' ')；};} else { p _ dCanvas=p _ useCanvas=p _ dCtx=null；返回函数(dEl，Scor2，Scor2){ if(类型为(DEl)=' string ')DEl=document。getelementbyid(DEl)；if(！(dEl)返回falsewith(DEl。style){ background COlOr=Scor2；};} } })();/script style body { font :0.75 em/1.4 Arial；向左文本对齐：余量：20px} hr { clear:both可见性：隐藏；} xmp { font :12 px/12px ' Courier New '；背景# fffcolor : # 666 border : solid 1px # CCC } div。示例{ border : solid 1px # 555余量：0 20px 20px 0；float : leftisplay : inline余量：1 em背景# fff宽度width :300 pxpadding :40 pxcolor : # 222 font : xx-small/1.2 ' Tahoma '；文本对齐：对齐；}/style body div id=' example 1 ' class=' example ' CSS特效代码/div div id='示例2 ' class='示例'各类编程源码、/div div id='示例3 ' class='示例'精品软件/div div id='示例4 ' class='示例'上海世博园/div div id='示例5 ' class='示例'我家北京天安门/div div id='示例6 ' class='示例'北京欢迎您！/div脚本setgrade('示例1 '，' #4ddbbe '，' #d449cc '，1)；setgrade('示例2 '，' #46ddbd '，' #d8b617 '，0)；setgrade('示例3 '，' #c81fc1 '，' #bf445f '，1)；setgrade('示例4 '，' #2285e5 '，' #d769eb '，0)；setgrade('示例5 '，' #8b4286 '，' #eac87d '，1)；setGradient('example6 '，' black '，' white '，0)；/脚本/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文对JavaScript编程有所帮助。