- 4/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
用CSS实现的渐变文字特效，渐变的效果源于一张GIF图片，用CSS去控制文字颜色的透明，并加载渐变图片，代码是从老外网站挖过来的，很实用吧？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gbk" /> <title>Css 渐变文字</title> </meta> <style> body { margin:0; padding:2em 4em; background:#fff; font:90% Arial, Helvetica, sans-serif; color:#666; line-height:180%; } h1 { font-size:300%; line-height:1em; color:#8bb544; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; } h2 { font-size:260%; color:#0079b6; font-weight:bold; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; /* use top padding to adjust the start of the gradient */ width:100%; } h3 { font-size:240%; color:#7365a0; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; padding-top:3px; position:relative; margin:.6em 0; width:100%; } h4 { font-size:220%; color:#dc5b24; font-weight:normal; letter-spacing:-.05em; position:relative; margin:.6em 0; padding-top:1px; width:100%; } h1 span, h2 span, h3 span, h4 span{ position:absolute; display:block; top:0; left:0; height:100%; width:100%; 1122123<img src=http://p1.mb5u.com/texiao/2/20100522230955289.png>2244234background:url(http://p1.mb5u.com/texiao/2/20100522230955289.png) repeat-x; } h1 span, h3 span{1122123<img src=http://p1.mb5u.com/texiao/2/20100522230955290.png>2244234background:url(http://p1.mb5u.com/texiao/2/20100522230955290.png) repeat-x;} * html h1 span, * html h3 span{ background-color:#fff; back\ground-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://p1.mb5u.com/texiao/2/20100522230955290.png", sizingMethod="scale"); } * html h2 span, * html h4 span{ background-color:#fff; back\ground-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://p1.mb5u.com/texiao/2/20100522230955289.png", sizingMethod="scale"); } </style> </head> <body> <h1>CSS渐变文字<span></span></h1> <h2>Welcome To mb5u.com<span></span></h2> <h4>老外那里搞过来的<span></span></h4> <h5>IE6/7、FF2兼容<span></span></h5> </body> </html>