负值zIndex实现文字隐藏于图片之后之无背景色实例页面

回到相关文章 »

代码：

CSS代码：
.title{display:block; width:80px; height:18px; line-height:18px; margin-top:1em; background:url("http://img04.taobaocdn.com/tps/i4/T1AdioXexkXXXXXXXX-97-168.png") no-repeat; text-decoration:none!important;}
.title_1{background-position:0 -64px;}
.title_2{background-position:0 -86px;}
.title_3{background-position:0 -108px;}
.title_4{background-position:0 -21px;}
.title h4{margin:0; font-family:'微软雅黑'; font-size:16px; position:relative; z-index:-1;}
.title_1 h4{color:#06f;}
.title_2 h4{color:#960;}
.title_3 h4{color:#54C012;}
.title_4 h4{color:#f60;}
HTML代码：
<a href="#" class="title title_1"><h4>便民服务</h4></a>
<a href="#" class="title title_2"><h4>卡券&amp;票务</h4></a>
<a href="#" class="title title_3"><h4>生活超市</h4></a>
<a href="#" class="title title_4"><h4>外卖&amp;外送</h4></a>
<p><input type="button" id="button" value="背景图切换显示" /></p>
jQuery使用代码：
var strStyle = '<style id="style" type="text/css">.title{background:none;}</style>';
$("#button").click(function() {
    var eleStyle = $("#style");
    if (eleStyle.size()) {
        eleStyle.remove();
    } else {
        $(strStyle).appendTo($("head"));
    }
});