css怎样截取图片的一部分呢？
.img{background-imag:url(menubg.gif);background-repeat:no-repeat;background-position:...
.img{
background-imag:url(menubg.gif);
background-repeat:no-repeat;
background-position:0px -30px;
height:10px;
width:30px;
}
我想截取的时上面绿色部分，为什么总是全部显示呢？
代码要怎么改才行，望指教，越详细越好 展开
background-imag:url(menubg.gif);
background-repeat:no-repeat;
background-position:0px -30px;
height:10px;
width:30px;
}
我想截取的时上面绿色部分，为什么总是全部显示呢？
代码要怎么改才行，望指教，越详细越好 展开
4个回答
展开全部
你用的是精灵技术，这需要定位position定位，设置一个长度和宽度，然后设置该图片为背景，然后定下位就可以了。很简单
追问
.img{
background:url(menubg.gif);
background-repeat:no-repeat;
background-position:0px 0px;
height:30px;
width:79px;
}
调成这样了还是不行 具体要怎么改呢？
追答
不是定义img，而是定div,然设背景，你定是效
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
background-position:0px -30px;
调这个值，高度好像不是10px吧，你显示的图片背景的高度不止10px吧！
调这个值，高度好像不是10px吧，你显示的图片背景的高度不止10px吧！
更多追问追答
追问
.img{
background:url(menubg.gif);
background-repeat:no-repeat;
background-position:0px 0px;
height:30px;
width:79px;
}
调成这样了还是不行
追答
把你的文件发过来，我看看，qq:763580682@qq.com
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你这个是图片的定位吧。
.img{ background-imag:url(menubg.gif) no-repeat;}
这样应该行了吧。只取绿色的部分，而且不平铺。。
.img{ background-imag:url(menubg.gif) no-repeat;}
这样应该行了吧。只取绿色的部分，而且不平铺。。
更多追问追答
追问
.img{
background:url(menubg.gif);
background-repeat:no-repeat;
background-position:0px 0px;
height:30px;
width:79px;
}
调成这样了还是不行 具体要怎么改呢？
追答
你的那串都不要了换成 .img{ background-imag:url(menubg.gif) no-repeat;}
试试？
定位的时候，你算算看你的图片大小。左上角的是原点（0,0）。而且Y轴一定要取负值。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-02-10 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
css样式对图片的裁剪：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></p> <p><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></p> <p> <title>untitled</title></p> <p> <style type="text/css" media="screen">
div.crop {
height: 300px;
width: 350px;
overflow: hidden;
}
div.crop img {
margin: -300px -200px 0 0;
}
</style></p> <p></head></p> <p><body></p> <p><div class="crop">
<img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
</div></p> <p></body>
</html>
说明：利用margin属性和overflow来做限制即可。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></p> <p><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></p> <p> <title>untitled</title></p> <p> <style type="text/css" media="screen">
div.crop {
height: 300px;
width: 350px;
overflow: hidden;
}
div.crop img {
margin: -300px -200px 0 0;
}
</style></p> <p></head></p> <p><body></p> <p><div class="crop">
<img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
</div></p> <p></body>
</html>
说明：利用margin属性和overflow来做限制即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
