CSS如何将背景图片定位只显示一张图片的固定区域!

离子漂浮物 2008-11-25 07:42:12
常将常用的图标放置在一张图片上,然后多地方css背景调用显示!
例如列表处
li { width: 20px; height:20px; background:url(/img/public_img.gif) no-repeat 0 2px; }
可是这个记录如果是自动伸缩的话,内容太大就把一张背景图都显示出来了!有没有办法,只固定显示一张背景图上的一块固定区域!
...全文
4908 点赞 收藏 16
写回复
16 条回复
飘零雾雨 2008年11月26日
說明你的圖沒有拼好
回复 点赞
RJCHEN1985 2008年11月26日
<style>
.c1{
width:17px;
height:17px;
background-image:url(25.jpg);
background-repeat: no-repeat;
background-position:0px 0px;
}
.c2{
width:17px;
height:17px;
background-image: url(25.jpg);
background-repeat: no-repeat;
background-position:-17px 0px;
}
.c3{
width:17px;
height:17px;
background-image: url(25.jpg);
background-repeat: no-repeat;
background-position:0px -17px;
}
.c4{
width:17px;
height:17px;
background-image: url(25.jpg);
background-repeat: no-repeat;
background-position:-17px -17px;
}
</style>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
回复 点赞
szoe5203 2008年11月26日
background-position进行图片定位
再在需要的div加上overflow:hiden就可以了
回复 点赞
bhbhxy 2008年11月26日
觉得应该用clip试试
回复 点赞
mute_solo 2008年11月26日
此乃css妖精技术
这个教程,保准你满意,看
http://www.52css.com/article.asp?id=735
回复 点赞
mark620 2008年11月26日
使用clip属性应该可以。
回复 点赞
mrshelly 2008年11月26日
background-position



<style>
div li {
display:table;
width:62px;
height:22px;
text-align:center;
background-image: url(http://www.jscode.cn/Uploadfile/200682494749491.GIF);
background-repeat: no-repeat;
cursor:hand;
text-decoration: none;
}

div li.c1 {background-position: 0px 0px;}
div li.c2 {background-position: -62px 0px;}
div li.c3 {background-position: -124px 0px;}
div li.c4 {background-position: -186px 0px;}
div li.c5 {background-position: 0px -22px;}
div li.c6 {background-position: -62px -22px;}
div li.c7 {background-position: -124px -22px;}
div li.c8 {background-position: -186px -22px;}
</style>
<div>
<li class="c1"></li>
<li class="c2"></li>
<li class="c3"></li>
<li class="c4"></li>
<li class="c5"></li>
<li class="c6"></li>
<li class="c7"></li>
<li class="c8"></li>
</div>

回复 点赞
生活最重要 2008年11月26日
body{
background-attachment: fixed;
background-image: url(Your image);
background-repeat: no-repeat;
background-position: center center;
}
回复 点赞
ddcatlee 2008年11月26日
1个背景图定位的方法,一般只适用于不重复,且尺寸相对固定的元素,例如单个的icon,或者固定高/宽的圆角框
如果你要自适应的,还是另存1个图片比较简单。
回复 点赞
曹长科 2008年11月26日
background-position
回复 点赞
离子漂浮物 2008年11月26日
[Quote=引用 5 楼 chinmo 的回复:]
<html>
<head>
<style type="text/css">
.img
{
width:120px;
height:151px;
position:absolute;
background:url(/img/public_img.gif);
clip:rect(45px 81px 90px 40px)
}
</style>
</head>

<body>
<div> <p>clip 属性剪切了一幅图像: </p> </div>
<div class=img> </div>
</body>
你不会运用一下吗?

</html>
[/Quote]


你这个是直接切div,如果在<div class=img> </div> 里加内容,那连同内容一起切掉了。如果我是想要这样的效果的话,直接用height和width限制div大小就是了。何必用clip:rect呢。background本身也有背景图定位能力了。
回复 点赞
一把编程的菜刀 2008年11月25日
<html>
<head>
<style type="text/css">
.img
{
width:120px;
height:151px;
position:absolute;
background:url(/img/public_img.gif);
clip:rect(45px 81px 90px 40px)
}
</style>
</head>

<body>
<div><p>clip 属性剪切了一幅图像:</p></div>
<div class=img></div>
</body>
你不会运用一下吗?

</html>
回复 点赞
离子漂浮物 2008年11月25日
呃,请看清楚问题,我问的是背景图,不是图片。
回复 点赞
一把编程的菜刀 2008年11月25日
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(45px 81px 90px 40px)
}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像:</p>
<p><img border="0" src="/img/public_img.gif" width="120" height="151"></p>
</body>

</html>
回复 点赞
一把编程的菜刀 2008年11月25日
clip: rect(10px, 5px, 10px, 5px)
对应:rect (top, right, bottom, left)

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p>clip 属性剪切了一幅图像:</p>
<p><img border="0" src="/img/public_img.gif" width="120" height="151"></p>
</body>

</html>
看看这个例子
回复 点赞
一把编程的菜刀 2008年11月25日
使用css 的clip
回复 点赞
发动态
发帖子
CSS
创建于2007-09-28

3.1w+

社区成员

6.0w+

社区内容

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区公告
暂无公告