1、首先我们来创建一个p元素，在里面写上hello:。
2、在浏览器界面上的显示如下。
3、接下来我们就为这个p元素来设置背景颜色。
4、接下来看看浏览器中变化。
5、说明我们就已经为p元素改好了背景色，如果要改变颜色的话直接在后面改就好。
这是我以前收藏的代码，利用CSS+JS实现渐变，代码如下：<!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>
<script>
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>
<style>
body{font:0.75em/1.4 Arialtext-align:leftmargin:20px}
hr{clear:bothvisibility:hidden}
xmp{font:12px/12px "Courier New"background:#fffcolor:#666 border:solid 1px #ccc}
div.example{ border:solid 1px #555margin:0 20px 20px 0float:left display:inlinemargin:1embackground:#fffwidth:300pxpadding:40pxcolor:#222font:xx-small/1.2 "Tahoma"text-align:justify}
</style>
<body>
<h1>渐变背景-beta1</h1>
<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>
<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>
