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

2024-09-05 12:21:56

字体：大中小

来源：转载

供稿：网友

CSS渐变背景的六个示例，个人觉得这是非常实用的一个常用技巧，不使用任何图片实现Div背景渐变，而且兼容IE和FF2，以后想要类似的效果，可有的参考了。

<html><head><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><body><div id="example1" class="example">CSS特效代码。</div>  <div id="example2" class="example">各类编程源码、 </div>  <div id="example3" class="example">精品软件</div>  <div id="example4" class="example">上海世博园 </div>  <div id="example5" class="example">我家北京天安门</div>  <div id="example6" class="example">北京欢迎您！</div><script>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);</script></body></html>

上一篇：图片与文字半透明效果，鼠标移上不透明

下一篇：JavaScript写的炫光波动效果