css文字渐变遮挡效果

字体文字一半颜色不同效果

自己写的

<style>
 #out{ border:1px solid red; width:200px; position:relative;overflow: hidden;}
 #out:after{content: attr(data-title);background:blue; color:#fff; display:block; text-align:center}
 #out a{ display:block; text-align:center;}
 #out>div{ position:absolute; top:0px; left:0px; width:45%; height:18px;overflow: hidden;}
 .show{ background:blue; color:#fff; width:100%;}
 .hide{ background:#ccc; color:#fff;width:200px; height:18px; display:block;}
</style>
</head>

<body>
 <div id="out" data-title="文字文字文字">
 <div><a class="hide">文字文字文字</a></div>
 </div>
</body>

http://pan.baidu.com/s/1i32N8ED

<div style="background: #ff9295;width: 400px;position: relative;height: 44px;text-align: center">
 <div style="position: absolute;height: 44px;width: 48%;overflow: hidden;">
    <div style="height: 44px;width: 400px;background: #fd5054;text-align: center">
       立即投资
    </div>
 </div>
 立即投资
</div>