【前端基础】

[个人纪录]

---

前言

---

一、精灵图

精灵图就是一个大的背景图,根据background-size来移动位置选择自己想要的背景.

body {
            background: url(../images/bg1.jpg) no-repeat;
            background-position: -156px  -20px;
            /* 背景图片位置可以是像素  一般为负值  如果只有一个数值的时候 默认是等比例缩放*/
             /* background-position: right center;*/
              /* 背景图片位置可以是方位名词 */
            background-position: center 50px;
            /* 背景图片位置也可以采用混合单位 20px, center / center, 20px */
            /* 如果是混合坐标  第一个一定是x   第二个是y */         
        }

二、二倍图

由于不同的设备物理像素比的问题,图片在移动端打开后会有缩放的问题.
以iphone8为例: 设备物理像素比为1:2,css像素为50px*50px的图片在iphone8打开,会放大至100px*100px,这时候就会产生图片的模糊问题.

解决办法:
提前准备100 100大小的图片,然后将准备的这张图片放置在50 50大小的盒子里, 在移动端打开图片不会再有模糊问题.

---

三、背景二倍图

主要记录背景二倍图在ps的缩放问题

1.ps 打开图片,选择图像中的图像大小,可以看到原图的相关信息:

2.宽度以及高度单位选择百分比, 将100改为50,图片缩放至一半.

接着在上图进行所需背景图坐标的测量.
上图中显示的尺寸就是background-size的大小.