javascript - 前端图片的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 前端图片的问题

ringa_lee 2017-04-10 17:06:19

[JavaScript讨论组]

343

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

ringa_lee

全部回复(6)

大家讲道理2017-04-10 17:08:19 6楼

background-position

定义背景图偏移量

赞 +0

添加回复

PHPz2017-04-10 17:08:19 5楼

background-position

看看这个css属性

赞 +0

添加回复

巴扎黑2017-04-10 17:08:19 4楼

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

赞 +0

添加回复

伊谢尔伦2017-04-10 17:08:19 3楼

在一个页面中，可能这样的小图标要用到十几个~ 如果每个图标都是一个文件的话打开一个页面光是这些小图标就会产生十几个http请求。
而浏览器同时最多并发处理8个http请求（各浏览器差异见下图），分成多个文件就会使得页面加载速度超慢~

而网页优化的一条建议就是减少http请求次数~

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

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

赞 +0

添加回复

巴扎黑2017-04-10 17:08:19 2楼

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

赞 +0

添加回复

大家讲道理2017-04-10 17:08:19 1楼

实现如图中的效果，用W。doc的图片作为小图标
实现步骤：
1、用ps量出你图标的宽高
2、在css中给p的样式设置测量车的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>
    <p class="bg">
        
    </p>
    
</body>

</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>