资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
CSS 渐变背景的6个演示代码
<!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>CSS渐变背景</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20setGradient%20%3D%20(function()%7B%20%0D%0A%20%20%20%20var%20p_dCanvas%20%3D%20document.createElement('canvas')%3B%20%0D%0A%20%20%20%20var%20p_useCanvas%20%3D%20!!(%20typeof(p_dCanvas.getContext)%20%3D%3D%20'function')%3B%20%0D%0A%20%20%20%20var%20p_dCtx%20%3D%20p_useCanvas%3Fp_dCanvas.getContext('2d')%3Anull%3B%20%0D%0A%20%20%20%20var%20p_isIE%20%3D%20%2F*%40cc_on!%40*%2Ffalse%3B%20%0D%0Atry%7B%20p_dCtx.canvas.toDataURL()%20%7Dcatch(err)%7B%20%0D%0Ap_useCanvas%20%3D%20false%20%3B%20%0D%0A%7D%3B%20%0D%0A%20%20%20%20if(p_useCanvas)%7B%20%0D%0A%20%20%20%20%20return%20function%20(dEl%20%2C%20sColor1%20%2C%20sColor2%20%2C%20bRepeatY%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(typeof(dEl)%20%3D%3D%20'string')%20dEl%20%3D%20document.getElementById(dEl)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!dEl)%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20nW%20%3D%20dEl.offsetWidth%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20nH%20%3D%20dEl.offsetHeight%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20p_dCanvas.width%20%3D%20nW%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20p_dCanvas.height%20%3D%20nH%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20dGradient%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sRepeat%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(bRepeatY)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dGradient%20%3D%20p_dCtx.createLinearGradient(0%2C0%2CnW%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sRepeat%20%3D%20'repeat-y'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dGradient%20%3D%20p_dCtx.createLinearGradient(0%2C0%2C0%2CnH)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sRepeat%20%3D%20'repeat-x'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dGradient.addColorStop(0%2CsColor1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dGradient.addColorStop(1%2CsColor2)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20p_dCtx.fillStyle%20%3D%20dGradient%20%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20p_dCtx.fillRect(0%2C0%2CnW%2CnH)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sDataUrl%20%3D%20p_dCtx.canvas.toDataURL('image%2Fpng')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20with(dEl.style)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundRepeat%20%3D%20sRepeat%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundImage%20%3D%20'url('%20%2B%20sDataUrl%20%2B%20')'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%20%3D%20sColor2%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7Delse%20if(p_isIE)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20p_dCanvas%20%3D%20p_useCanvas%20%3D%20p_dCtx%20%3D%20null%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20return%20function%20(dEl%20%2C%20sColor1%20%2C%20sColor2%20%2C%20bRepeatY)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(typeof(dEl)%20%3D%3D%20'string')%20dEl%20%3D%20document.getElementById(dEl)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!dEl)%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dEl.style.zoom%20%3D%201%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sF%20%3D%20dEl.currentStyle.filter%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dEl.style.filter%20%2B%3D%20'%20'%20%2B%20%5B'progid%3ADXImageTransform.Microsoft.gradient(%20%20%20%20GradientType%3D'%2C%20%2B(!!bRepeatY%20)%2C'%2Cenabled%3Dtrue%2CstartColorstr%3D'%2CsColor1%2C'%2C%20endColorstr%3D'%2CsColor2%2C')'%5D.join('')%3B%20%0D%0A%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20p_dCanvas%20%3D%20p_useCanvas%20%3D%20p_dCtx%20%3D%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20function(dEl%20%2C%20sColor1%20%2C%20sColor2%20)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(typeof(dEl)%20%3D%3D%20'string')%20dEl%20%3D%20document.getElementById(dEl)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!dEl)%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20with(dEl.style)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%20%3D%20sColor2%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D)()%3B%20%0D%0A%3C%2Fscript%3E"> <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> <body> <div id="example1" class="example">管理资源吧（glzy8.com）提供JavaScript/CSS特效代码。</div> <div id="example2" class="example">管理资源吧各类编程源码、 </div> <div id="example3" class="example">提供各类编程源码</div> <div id="example4" class="example">管理资源吧（glzy8.com） </div> <div id="example5" class="example">glzy8.com </div> <div id="example6" class="example">管理资源吧 </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0AsetGradient('example1'%2C'%234ddbbe'%2C'%23d449cc'%2C1)%3B%20%0D%0AsetGradient('example2'%2C'%2346ddbd'%2C'%23d8b617'%2C0)%3B%20%0D%0AsetGradient('example3'%2C'%23c81fc1'%2C'%23bf445f'%2C1)%3B%20%0D%0AsetGradient('example4'%2C'%232285e5'%2C'%23d769eb'%2C0)%3B%20%0D%0AsetGradient('example5'%2C'%238b4286'%2C'%23eac87d'%2C1)%3B%20%0D%0AsetGradient('example6'%2C'black'%2C'white'%2C0)%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程