css特效：字体与背景反白一例
效果如图：
主要由文字和背景两部分组成。背景为蓝色由左向右渐变透明，截图只截了前半截。代码如下：
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>恭喜发财title>
<style>
/*文字*/
.tit{
position:fixed;
left:20px;
top:10px;
z-index: :100;
}
.antzone{
display:inline-block;
font-size:42px;
line-height:42px;
color:#fff;
position:relative;
overflow:hidden;
white-space:pre;
}
.antzone:before{
position:absolute;
left:0;
top:0;
color:#1571FA;
display:block;
height:50%;
content:attr(data-content);
overflow:hidden;
}
/*蓝色背景*/
.tit-bg{
margin-top:30px;
width:100%;
height:30px;
z-index:1;
background-color:#1571FA;
opacity: 1.0;
filter: alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
/* rgba(r,g,b,不透明度 0.0完全透明，1.0完全不透明)*/
background: -moz-linear-gradient(right, rgba(21, 113, 250,0.0) 0%, rgba(21, 113, 250,0.4) 30%, rgba(21, 113, 250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right bottom, right top, color-stop(0%,rgba(21, 113, 250,0.0)), color-stop(30%,rgba(21, 113, 250,0.4)), color-stop(100%,rgba(21, 113, 250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* IE10+ */
background: linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8087e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
style>
head>
<body>
<div class="tit">
<span class="antzone" data-content="恭">恭span>
<span class="antzone" data-content="喜">喜span>
<span class="antzone" data-content="发">发span>
<span class="antzone" data-content="财">财span>
div>
<div class="tit-bg">div>
body>
html>