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

离子漂浮物 2008-11-25 07:42:12
常将常用的图标放置在一张图片上,然后多地方css背景调用显示!
例如列表处
li { width: 20px; height:20px; background:url(/img/public_img.gif) no-repeat 0 2px; }
可是这个记录如果是自动伸缩的话,内容太大就把一张背景图都显示出来了!有没有办法,只固定显示一张背景图上的一块固定区域!
...全文
5880 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
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本身也有背景图定位能力了。
  • 打赏
  • 举报
回复
<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
  • 打赏
  • 举报
回复
呃,请看清楚问题,我问的是背景图,不是图片。
  • 打赏
  • 举报
回复
<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>
  • 打赏
  • 举报
回复
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>
看看这个例子
  • 打赏
  • 举报
回复
使用css 的clip

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧