Css 渐变文字效果

2024-09-05 12:21:18

字体：大中小

来源：转载

供稿：网友

用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" content="text/html; charset=gbk" /><title>Css 渐变文字</title><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; 	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%;	background:url(/jscss/demoimg/200902/gradient_1.png) repeat-x;}h1 span, h3 span{background:url(/jscss/demoimg/200902/gradient_2.png) repeat-x;}* html h1 span, * html h3 span{	background-color:#fff;	back/ground-color:transparent;	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/200902/gradient_2.png", sizingMethod="scale");}* html h2 span, * html h4 span{background-color:#fff;back/ground-color:transparent;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/200902/gradient_1.png", sizingMethod="scale");}</style></head><body><h1>CSS渐变文字<span></span></h1><h2>恰似你的温柔<span></span></h2><h4>老外那里搞过来的<span></span></h4><h5>IE6/7、FF2兼容<span></span></h5></body></html>

上一篇：Wingdings文鼎特殊字符组合的桌面图标

下一篇：在一行范围内无间断的文字滚动代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注