背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题

做了一张足够大分辨率的图，要截取指定的图片位置就需要设置background-size，公示如下：

参考资料：

https://www.w3cplus.com/css/css-background-size-graphics.html

https://segmentfault.com/a/1190000004350120

高分辨率图像宽度 / 目标图像宽度 = X

原始Sprites图像宽度 / x = background-size的宽度值

高分辨率头像宽度=原图的那个头像宽度

目标像素宽度为指定的width和height，即x

原图sprites图像宽度：等于原图的宽度/x=宽度，即background-size:宽度,auto

参考资料：https://www.jianshu.com/p/6b1f94bfa263

物理像素（设备像素，也就是显示器的真实像素，每个像素大小是屏幕固定的属性，设备分辨率就是说这个显示器宽高分别是多少个设备像素），浏览器不关心物理像素。

设备独立像素(dips)也就是逻辑分辨率，浏览器只需要知道逻辑分辨率就可以了。用设备独立像素定义的尺寸，不管屏幕参数如何，都能以合适的大小显示，将多个设备像素划分为一个逻辑像素是操作系统决定。

举个例子：

设备屏幕分辨率是1920x1200，逻辑分辨率设置是1280x800

那么表示：纵横方向的设备像素数量恰好是像素独立设备的1.5倍。这也表示设备独立像素的。

css像素是什么？

当我们缩放页面的时候，css的像素数量不会少，改变的只是每个css像素的大小，我们在css里面用的都是css像素

举个例子：

width:128px;，当我们页面缩放到200%的时候，宽度依然是128个css像素，只是每个css像素的宽高变成原来的两倍。

如果原本宽度为128个设备独立像素，当页面缩放到200%的时候，元素宽度为256个设备独立像素（css像素始终是128）

在缩放100%的时候，1个css像素大小等于一个设备独立像素

css像素和设备像素的关系：

devicePixelRatio=设备上物理像素/设备独立像素=设备像素比

devicePixelRatio=在相同长度的直线上，设备像素的数量/css像素的数量，如果devicePixelRatio=2,,表示设备像素是css像素数量的2倍，也就是2个设备像素=一个css像素，也可以说是css像素的边长是设备像素的2倍

通过学习，我们明白了设置css像素也就是设置独立设备像素，因为devicePixelRatio的不同，我们设置1px实际上是好几个物理像素的单位。

参考资料：http://blog.163.com/angelina_wu/blog/static/251891024201602223515175/

像素密度跟像素比没有直接关系，像素密度越高，设备屏幕中的图像越清晰

Retina：视网膜屏幕，本质上也就是1个设备像素=多少个物理像素

背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题相关推荐

电脑桌面怎么设置html背景图,css中如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
No.006 雪碧图CSS Sprite
雪碧图CSS Sprite 1. 名称由来 2. 使用目的 3. 实现注意 (以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出) 1. 名称由来为什么叫雪碧图呢?因为常喝的雪碧的英文名称 ...
将winform的PictureBox/panel控件背景图多余白边设置为透明
有关如何将winform的PictureBox控件背景图多余白边设置为透明如图所示: PictureBox控件如果直接这样叠加,原本png图片没有像素的边角会变成白色填充只需要设置该图片的父容器为 ...
php怎么加css和背景图,css的背景图怎么加边框
css背景图加边框的方法:首先创建一个HTML示例文件:然后通过"background-image"引入一张背景图:最后通过border属性设置边框即可. 本文操作环境:windo ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
多背景图CSS,CSS3设置多张背景图片
个人作业--week1 1.问题 (1)与软件学院相比,计算机科学更偏向理论研究,本系开设软件工程课程的意图是否是为了平衡理论与应用的比重? (2)Bug的定义根据开发者与使用者的分析角度不同,有着很 ...
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...

背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题

背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题相关推荐

最新文章

热门文章