您的位置：首页 > Web前端 > CSS

CSS分割背景图片的技巧

2011-11-22 22:31 363 查看



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

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


Property Values

VALUEDESCRIPTION
top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right		If 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 positions
inheritSpecifies 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原图：


按钮的代码:

帮助
按钮的CSS:

帮助
最重要的一行，鼠标移上去的时候设置图像的位置为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进行背景切割以减少请求的简单例子就搞定了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航