CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)
首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。
比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：
#item2{
background-position: -100px 0;
}其他的同理。
最后贴出来一个例子，看明白了这个属性就懂了。
用到的另一张图片名字叫9pic1.jpg,先贴出来：
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景background-position切图</title>
<style>
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}
.showImage:hover{
background-image: url(9pic1.jpg);
}
ul{
list-style: none;
}
ul li{
float: left;
margin: 20px;
}
#item1{
background-position: 0 0;
}
#item2{
background-position: -100px 0;
}
#item3{
background-position: -200px 0;
}
#item4{
background-position: 0 -100px;
}
#item5{
background-position: -100px -100px;
}
#item6{
background-position: -200px -100px;
}
#item7{
background-position: 0 -200px;
}
#item8{
background-position: -100px -200px;
}
#item9{
background-position: -200px -200px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li id="item1" class="showImage"></li>
<li id="item2" class="showImage"></li>
<li id="item3" class="showImage"></li>
<li id="item4" class="showImage"></li>
<li id="item5" class="showImage"></li>
<li id="item6" class="showImage"></li>
<li id="item7" class="showImage"></li>
<li id="item8" class="showImage"></li>
<li id="item9" class="showImage"></li>
</ul>
</div>
</body>
</html>
这个例子把那个图片打散，横排在页面上，还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。
博思aippt
2024-07-20 广告
CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。
扩展资料
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
最重要的一点是
你要了解背景图片在控制项中显示的起始位置，控制项的高度，宽度。
以下是简要分析，你还要实践一下才能掌握真谛：
对一个宽度40，高度30的div设定一个背景，而背景图片是一张很多小图片的组合。
这里隐含了一个条件，就是小图片的宽度和高度和小图片的间隙要大于等于div的设置，原因：
当你设定背景图片的起始位置时，如果小图片相对div太小，则会显示多个小图片，相反如果小图片在一张整图过大或布局不够友好(比如间隙[上，下，左，右]),那么也是不算符合要求而导致显示不完整或不合你的格。
讲了上面这么多，有一个重要的地方，就是如何设置背景图片的起始位置：
答案就在background-position里面了，当然background也可以设置。
你找找别人的案例就会发现他们的position都设置为负数，比如background-position:-5px -4px;
这个就是背景图片显示的起始位置。那这个数字怎么设定呢？
哈哈，我是不是在卖关子？
呵呵，不卖关子，你咋能记得住。
还有这可是我经验的积累，过程，分享。
说正题，图片在背景的显示坐标(我们就当他是坐标)，为从图片的左上角算起为原点(0,0),
向右则为负(跟一般的横坐标相反),向下也为负(跟纵坐标一样),那么单位(px，当然也可以是其他的)则为刻度，好了，图片定位完成。
接下来就是你想要显示这个背景图片的哪个小图标，请按坐标标记下小图片的起始位置，那么
这就是你想要的background-position的结果了，至于怎么只显示这个小图片，就回到上面的讲的，需要对背景图片布局了，以及实际需求(比如div的高度宽度也觉得使用小图片的大小),
当然你会想，为什么不直接通过background来设置高度和宽度呢？我告诉你，是不行的。
所以你要对控制项div来设置高度和宽度，让小图片刚好显示出来，说了这么多，请看以下样式:
div.myDiv {width:40px;height:30px}
div.myDiv{background-img:url(test.jpg);}
div.normal{background-position:-5px -10px;}
div.over{{background-position:-20px -30px;}
然后是html:
普通情况如下:
<div class="myDiv normal" ></div>
当发生onmouseover事件的时候(当然是你自己添加的事件,不过标签是<a>的话就用样式A:over设置了),修改div的样式变成如下:
<div class="myDiv over" ></div>
那么实际情况我只是对position的位置做了调整，也就是相当于修改了背景图片的显示区域。
而这个显示区域的变化就是2张小图片的位置罢了~
好了，讲是讲完了，该你实践了~
实践才是进步的唯一稳步~
有什么软件能快速定位小图标的起始位置吗？
我很少这样做，不过好像有个叫sprite的程序可以
1、用DW打开这里的操作软件，定义一个CSS样式，如下图所示。
2．首先看看背景图像的效果，如下图所示：
3．在div中添加一个img并输入以下代码。如下图所示：
4．可以实现如下图所示：
注意事项：
如果想让开发者创建一个ico图像，命名为favicon。ico，16＊16像素，不超过16种颜色，将favicon．ico放在网站的根目录下。
浏览器将继续搜索站点的根目录，无论何时找到一个名为favicon的文件。ico，它会在访问者的地址栏和收藏列表中显示图标。
|
广告 您可能关注的内容 |
