请教个背景CSS的问题,撒分求解……

cfesc9 2010-03-13 08:58:13

以前见过一个网页图标全都来自一个大图片（上边全是排列有序的小图标）,
现在找不到了，想知道它的CSS是怎么实现的。请高人赐教，谢谢……

就是设置网页上的某元素的背景为一个图片儿的任意一部分。
不知道我说清了没有……高手帮忙呀！！！

...全文

158 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

berggi 2010-03-15

打赏
举报

这个网页里有详细的制作方法，你看一下就会了
Div+css网页布局多背景图放在一张图上作背景使用css设置方法
http://www.sydjy.cn/bbs_list.asp?Id=4978

berggi 2010-03-15

打赏
举报

css用一张背景图background-position定位
实现方法：

首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;

CSS Sprites图片切割术

　　一、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。
　　二、不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。
　　三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
　　四、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。
　　五、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。
　　六、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。
　　七、图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。
　　八、区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。
　　九、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

mykelly6 2010-03-15

打赏
举报

[Quote=引用 8 楼 cs5276 的回复:]
CSS SPRTIES

用background-position定位的吧？
[/Quote]
jquery ui也用的这个来切图标的，lz搜一下就知道了，一般用于有很多小图标的网站。
我之前试了一下，挺好玩的。

Passage2011 2010-03-15

打赏
举报

[Quote=引用 11 楼 net_lover 的回复:]
很多网站都是这样啊，比如sina
http://i1.sinaimg.cn/dy/deco/2010/0127/news_i_font_001.png

http://i3.sinaimg.cn/dy/home/090605/news_mj_001.png
[/Quote]随处都能见你身影。.net板块的少见到你呵呵！

flesu 2010-03-14

打赏
举报

紧跟老大后面学习！！！

孟子E章 2010-03-13

打赏
举报

很多网站都是这样啊，比如sina
http://i1.sinaimg.cn/dy/deco/2010/0127/news_i_font_001.png

http://i3.sinaimg.cn/dy/home/090605/news_mj_001.png

coderfanl 2010-03-13

打赏
举报

上面的循环有点小问题，调整了一下：



<STYLE>

.c{

	width:120px;height:120px;

	background-image:url(http://www.pcjdesktop.cn/DownloadMiniature/200770202534810392.jpg);

}

#t1{background-position:-40px -35px;}

#t2{background-position:-40px -205px;}

#t3{background-position:-40px -375px;}

</STYLE>

</HEAD>

<BODY>

第一行:<div id="t1" class="c"></div>

第二行:<div id="t2" class="c"></div>

第三行:<div id="t3" class="c"></div>

<script type="text/javascript">

<!--//

var $=function(o){return document.getElementById(o);},i=0;

function rp(){

	var arr=["-40px","-160px","-280px","-400px","-520px","-640px"]

	if(i<arr.length-1){

		i++;

		$("t1").style.backgroundPosition = arr[i]+" -35px";

		$("t2").style.backgroundPosition = arr[i]+" -205px";

		$("t3").style.backgroundPosition = arr[i]+" -375px";

	}

	else{i=0;}

}

setInterval("rp()",1000);

//-->

</script>

coderfanl 2010-03-13

打赏
举报

或者用backgroundPosition ，例如：



<STYLE>

.c{

	width:120px;height:120px;

	background-image:url(http://www.pcjdesktop.cn/DownloadMiniature/200770202534810392.jpg);

}

#t1{background-position:-40px -35px;}

#t2{background-position:-40px -205px;}

#t3{background-position:-40px -375px;}

</STYLE>

</HEAD>

<BODY>

第一行:<div id="t1" class="c"></div>

第二行:<div id="t2" class="c"></div>

第三行:<div id="t3" class="c"></div>

<script type="text/javascript">

<!--//

var $=function(o){return document.getElementById(o);},i=0;

function rp(){

	var arr=["-40px","-160px","-280px","-400px","-520px","-640px"]

	if(i<arr.length){

		$("t1").style.backgroundPosition = arr[i++]+" -35px";

		$("t2").style.backgroundPosition = arr[i++]+" -205px";

		$("t3").style.backgroundPosition = arr[i++]+" -375px";

	}

	else{i=0;}

}

setInterval("rp()",1000);

//-->

</script>

cs5276 2010-03-13

打赏
举报

CSS SPRTIES

用background-position定位的吧？

cfesc9 2010-03-13

打赏
举报

截出来了，不过，还是得循环，只能整个图片一起的，不能循环一部分，高手有解决办法吗？

flesu 2010-03-13

打赏
举报

[img=http://www.google.cn/images/nav_logo7.png]http://www.google.cn/images/nav_logo7.png[/img]

flesu 2010-03-13

打赏
举报

参见www.google.cn下方的7个选项图标，其实就是来自一个图片。

coderfanl 2010-03-13

打赏
举报

clip



<body>

<style type="text/css">

#t{

	clip:'rect(1.2cm 4cm 4.2cm 1.3cm)';

	position:absolute;

	top:0cm;

	left:0cm;

}

</style>

<IMG id="t" SRC="http://www.pcjdesktop.cn/DownloadMiniature/200770202534810392.jpg" />

xqx1213 2010-03-13

打赏
举报

[Quote=引用 2 楼 cfesc9 的回复:]
引用 1 楼 xqx1213 的回复:

是不是背景循环啊？？切你要那个小图标，做为背景，加上repeat循环，就行了~~

不是循环吧，如果加上循环，那个图标不就不是一个了吗？
[/Quote]
还是同一个，只是会增多，一个个有序地排列着，你可以试一下~~

cfesc9 2010-03-13