-1

图片描述

如上图所示划红线的图标的图片路径是下面划红线的地址,然后打开后的图片是这样的,不知道是怎么选中这个大图中的一张图片作为图标的,是怎么处理的,实在是不知道啊
图片描述

2016-02-18 提问
6 个回答
1
background-position

定义背景图偏移量

1
background-position

看看这个css属性

1

background-position:0 0; 图片0 0 开始的位置,框有多大显示多大,超出部分隐藏

1

在一个页面中,可能这样的小图标要用到十几个~ 如果每个图标都是一个文件的话打开一个页面光是这些小图标就会产生十几个http请求。
而浏览器同时最多并发处理8个http请求(各浏览器差异见下图),分成多个文件就会使得页面加载速度超慢~
图片描述
而网页优化的一条建议就是 减少http请求次数~

所以就把这些小图标合为一个文件了,在使用中的时候,计算每一个小图标的偏移位置,就能正确显示单个图标了~

不过这种计算方式显然比较复杂,如果页面里面只有一两个图标,也可以考虑不合并。

0

百度一下“图片精灵”或者“雪碧图”(css sprite)。这样将很多小的零散的图片拼在一起成一张大图片,页面加载时只需一个http请求就可以了。
前端还有很多canvas动画效果,也是通过这样的技术完成的(一张大图中包含了动画的所有帧)

0

图片描述
实现如图中的效果,用W。doc的图片作为小图标
实现步骤:
1、用ps量出你图标的宽高
2、在css中给div的样式设置测量车的width和height
3、background:url("背景图片")
4、background-position:x y;//x:x方向的偏移量 y:y方向的偏移量
方法一:是用ps测量出x、y方向的偏移值;方法二:在浏览器中调试模式中调试偏移量是多少
一般是两者结合。
代码如下:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    
    <style>
        .bg{
            width:28px; //图标宽
            height: 34px;//图标高
            background: url(img/38694355-56c5a3ac80b93.png);//背景图片
            background-position: 0 -112px;
        }
    </style>
</head>
<body>
    <div class="bg">
        
    </div>
    
</body>

</html>

撰写答案

推广链接