<!doctype HTML public '-//w3c//dtd HTML 4.01//en ' http://www.w3.org/tr/html4/strict.dtd ' > <ptml> <pead > <meta http-equiv=content-type content= "text/html; CHARSET=GBK "> <title>css gradient background </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.getelementby Id (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.getelemen Tbyid (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" > Cloud-Habitat Community (jb51.net) provides JAVASCRIPT/CSS special effects code. </div> <div id= "example2" class= "Example" > cloud-dwelling community various programming source code, </div> <div id= "Example3" class= "Example" & GT; provide various programming source code </div> <div id= "example4" class= "Example" > Cloud-dwelling Community (jb51.net) </div> <div id= "Example5" Class= "Example" >jb51.net </div> <div id= "Example6" class= "Example" > Cloud-dwelling Community </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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
