标题栏目处的背景图平铺技巧

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-07-01 23:05:44　-　阅:　-　评:0　-　积分:0

准确来说，我也不知道该取什么名字好，这个技巧的话应该是我在淘宝上看到的，应该在2年前吧。现在在网上搜索了下也没有找到对应的文章，但凭着艺灵的思路还是将这个案例完成了。还是先来看张效果图吧：

上面这张图是一个普通网站的标题栏目。通常我们在码代码时会将字和图片进行分离，目的是减少图片和提高图片重用性。那么现在有一个问题，如果我想要下面这张图片的效果，我们又该怎么做呢？效果图：

我想有很多看官会这样：在ps中对这个原图进行修改调整成合适的尺寸，然后再做背景就ok了。其实在最开始的时候，艺灵也是这么做的，但现在不会。因为这种方法的效率太差！

可能会有看官疑问了，为什么太差呢？我怎么没有感觉到呢？

艺灵再举个例子吧：如果我现在要写一个宽度为650的标题栏目，图片还是用刚才的图片，这个时候我们肯定又得到ps中进行p图了；如果现在老板突然变了要求，标题栏目处的宽度需要是990，那么你又得在ps中进行p图了；依次类推，是不是十分麻烦且苦逼？！

那么我们应该怎么做呢？根据2年前的那个实例以及艺灵的思路，终于完美解决了这个问题。大致思路如下：先考虑下背景图可能存在的尺寸，然后选一个较大点的，例如:750宽，然后通过伪对象:before/:after进行定位；在ie8以下浏览器中，通过新建空白标签来替代伪对象的效果。需要注意的是：由于伪对象是position:absolute,所以父级需要添加position:relative并且右浮的more需要添加一个z-index。

好了，思路及注意事项都已经说了，下面开始动手码代码吧。此处艺灵选择的背景图片宽度是750，如图： 750宽标题栏目背景图有了背景图后我们先来完成图一的效果。

css:

*{margin:0;padding:0}
body{font-size:12px;font-family:"Microsoft YaHei"}
.col-sub{width:190px}
.col-sub h3{position:relative;height:28px;line-height:28px;background:url(titbg.gif) no-repeat 0 0;padding-left:2.2em;font-size:14px;}
.col-sub h3 a{position:relative;z-index:10;float:right;font-weight:normal;font-size:12px;text-decoration:none;padding-right:9px;text-indent:0}
.col-sub h3:before,.col-sub .h3-iebug-r{content:"";background:url(titbg.gif) no-repeat right 0;height:28px;width:50%;position:absolute;top:0;right:0}

html:

<div class="col-sub">
　<h3>
　　<a href="http://www.yilingsj.com/xwzj" target="_blank" >more</a>艺灵随笔
　</h3>
</div>

这个时候我们想要的效果就已经完成了，但是没有做兼容性处理，因为这个:before在这个ie8-中并不被支持，所以这个时候我们需要写一个jquery来进行处理下ie8-的兼容。

jquery for iebug:

$(function(){
　var $ie_str="<span class='h3-iebug-r'><\/span>";
　$('body').append('<!--[if lt IE 9]><script type="text/javascript">$(function(){var $c_h3=$(".col-sub h3");$c_h3.append("'+$ie_str+'")});<\/script><![endif]-->');
});
demo

点击上面的demo后，在各浏览器中都能实现我们想像中的最终效果了。此时再把.col-sub的宽度修改成750/990，都能完美实现最终效果，而我们只用了一张图片，是不是感觉很爽？！

你以为这样就完了么？善于动手操作的看官总会发现一些问题，例如：如果我想做一个宽度大于1450的标题栏目，此时的效果图是这样的：

产生这一现象的原因主要是：背景图宽度不够！此时可能有看官会到ps中把原本是750的图p成1920，这样做也行，但是如果老板让标题栏目的宽度是6000呢？你又得到ps中p图了。当然了，宽度这么大是不太现实的事情，我们只作一些额外的讨论。艺灵想到的方案有两种：
方案一：由于伪对象:after并没有用到，所以在栏目宽度大于1400的时候，我们给其伪对象添加背景，通过定位与背景偏移技术实现最终效果。
缺点：1.在ie8中需要添加两个空标签来替代伪对象；2.栏目宽度超大时仍会出现前面的现象。
方案二：在ps中，对原图进行切图制作一个css sprite如图：缺点：在ie8中需要添加两个空标签来替代伪对象。

两种方案都有缺点，这个是不可免的，主要还是看实际情况而定。下面的话，艺灵就献上方案二的源码供看官参考。

方案二完整源码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>完美解决不同宽度下标题栏目背景平铺的问题</title>
<meta name="keywords" content="标题栏特效,背景平铺,背景偏移,css sprite,背景填充,伪对象,:before,:after,自适应背景布局">
<style type="text/css">
*{margin:0;padding:0}
body{font-size:12px;font-family:"Microsoft YaHei"}
.col-sub{width:190px}
.col-sub h3{position:relative;height:28px;line-height:28px;background:url(titbg2.png) repeat-x;padding-left:2.2em;font-size:14px;}
.col-sub h3 a{position:relative;z-index:10;float:right;font-weight:normal;font-size:12px;text-decoration:none;padding-right:9px;}
.col-sub h3:before,.col-sub h3:after,.col-sub .h3-iebug-l,.col-sub .h3-iebug-r{content:"";background:url(titbg2.png) no-repeat right -28px;height:28px;width:15%;position:absolute;right:0;top:0;width:10px;}
.col-sub h3:before,.col-sub .h3-iebug-l{ background-position:left -28px;left:0;width:30px;}
</style>
</head>
<body>
<div class="col-sub w190">
　<h3><a href="/xwzj" target="_blank" >more</a>艺灵随笔</h3>
</div>
<script type="text/javascript"  src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
　var $ie_str="<span class='h3-iebug-l'><\/span><span class='h3-iebug-r'><\/span>";
　$('body').append('<!--[if lt IE 8]><script type="text/javascript">$(function(){var $c_h3=$(".col-sub h3");$c_h3.append("'+$ie_str+'")});<\/script><![endif]-->');
});
</script>
</body>
</html>
demo

好了，各浏览器都兼容，来看下ie6中的效果图吧： (完)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2015-07-01/284.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！