CSS分割背景图片的技巧

来源：互联网发布：淘宝上的图片怎么做的编辑：程序博客网时间：2024/06/07 04:44

当然用这个技巧也要选对地方用才行，要是经常需要改动的图像用这个技术还是有点折腾的。

核心的属性是这个：background-position 参数值从w3schools找出来的

Property Values

VALUEDESCRIPTIONtop left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom rightIf you only specify one keyword, the second value will be “center”. Default value is: 0% 0%x% y%The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.xpos yposThe first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positionsinheritSpecifies that the setting of the background-position property should be inherited from the parent element

这里有篇不错的文章描述的是下面这个例子，将原图竖着的1234显示成横着的4个盒子
CSS: Using Percentages in Background-Image

.box1

.box2

.box3

.box4

下面这个例子也是常用到的：
鼠标移到按钮上，用稍微亮一点点的图片显示的悬停效果。
用到的green.png原图：

按钮的代码:

帮助
1
<aclass="green"href="#">Green<span> </span></a>

按钮的CSS:

帮助
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
a {
    /* The section titles */
    display:block;
    font-size:21px;
    height:34px;
    overflow:hidden;
    padding:10px20px0;
    position:relative;
    width:200px;
}
a {
    text-decoration:none;
}
a:hover{
    /* Removing the inherited underline from the titles */
    text-decoration:none;
}
a span{
    /* This span acts as the right part of the section's background */
    height:44px;
    position:absolute;
    right:0;
    top:0;
    width:4px;
    display:block;
}
a.green{background:url(img/green.png)repeat-xtopleft;color:#436800;}
a.greenspan{background:url(img/green.png)repeat-xtopright;}
/* The hover effects */
a:hover{background-position:bottomleft;}

最重要的一行，鼠标移上去的时候设置图像的位置为bottom left，而下半部分的图像比上半部分亮一点。
效果如下:

Green

Orange

Blue

Red

from sprite.png

最后一个按钮样式和第一个其实是一样的，只不过最后是从sprite.png加载过来的，我使用了CSS 图片拼合生成器将四张图拼接起来了，然后再用CSS去定位。
拼接完成之后的图：

这是另外一篇不错的参考

为了加快页面访问速度，我们可能会想到多种可行的办法：如提升硬性条件方面的性能、减少HTTP请求次数，使用Cache，合并文件（aoao总结的把js和css合并成一个文件非常好玩）等等。

　　这里主要讲一下如何节省图片的请求次数，至于如何能减少图片请求，不外乎就是减少实际图片的数量和代码的编写质量。

　　那么，如何才能减少图片的数量呢？我们可以把一些不经常变动的图片由原来分割成的多张小图合并成一张，然后通过CSS背景切割来加快完成渲染，这样就减少了实际图片的数量，也就减少了部分图片请求。至于这种技术，我们暂时叫它css sprites。

　　如下面这个圆角框架的处理：

　　［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm］

CSS部分：

#list{
width:198px;
}
.hd,.ft{
background:url(skin/bg_01.gif) no-repeat;
}
.hd h3{
height:30px;
line-height:30px;
text-indent:5px;
}
.bd{
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:5px;
}
.ft{
overflow:hidden;
height:6px;
background-position:left bottom;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DY CSS图片切割</title>
<meta name="description" content="使用css sprites技术切割合并背景图片以减少HTTP请求" />
<meta name="keywords" content="css sprites, 图片切割, 图片合并, HTTP请求" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<div id="list">
<div class="hd"><h3>顶部边框（标题）</h3></div>
<div class="bd">正文<br />大段正文内容<br />还可以写更多的内容</div>
<div class="ft"></div>
</div>
</body>
</html>

　　以往做圆角的东东，一般可能会做成2，3张图片。而可以看到，这个例子仅用了一张图片，所以也会减少不少图片请求。

　　先看一下CSS是如何写的：首先在.top和.bot中定义了背景图片，这是自然的，要用背景肯定得定义背景图片，这是天经地义的，这里肯定没有什么出采的地方。接着设置background-position样式来达到只显示背景图的某个区域。

　　因为.top和.bot调用的是同一张背景图片，所以就同时给它们定义，省得单独需要定义2次，这样写也减少了不少字节哦：）

　　再一个疑问就是中间部分是如何解决边框问题的。可以看到，只需要定义左右两边的border就可以搞定。

　　至此，关于合并图片，并利用CSS进行背景切割以减少请求的简单例子就搞定了。