web前端切图处理
技巧:
一. 如何在 Retina 屏幕的设备使用更高分辨率的图片
div {
background: url(logo.png) no-repeat;
background-size: cover;
height: 200px;
width: 400px;
}
"contain"值可以让你的背景图像缩放到最大宽度和高度,并且让整个背景图像保持在容器内。
2.image-set实现Retina屏幕下图片显示(CSS4中对background-image属性定义的一种新方法,image-set)
在普通分辨率下,将调用“qqlogo_1x.png”图片,而在Retina屏幕下(比如iPhone4s,iPhone5,New iPad等IOS设备)下会调用“qqlogo_2x.png”图像,从而避免了Logo在Retina屏幕下显示不清晰的问题。
#test {
background-image: url(assets/no-image-set.png);
background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
width:200px;
height:75px;
}
类似于不同的文本,图像也会显示成不同的:
- 不支持image-set:在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
- 支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
- Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。
image-set真的好强大,很可惜的是,他仅支持background-image属性,而不能使用在“”标签中。
web前端切图处理的更多相关文章
- 前端切图神器-cutterman
之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...
- 前端切图相关ps技术
标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...
- web中切图、快速切图与web雪碧图制作的方法
声明: web小白的笔记,欢迎大神指点,联系QQ:1522025433. 工具:Photoshop 1.复制文字:点击文章工具后选择文字. 2.矩形选框工具 看信息 f8, 取消矩形选框 Ctrl+D ...
- 前端切图实战(PSD设计稿转化为前端)
课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 前端切图要选择png和jpg呢?
今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- ps前端切图常用快捷键
一.新建文件:预设-自定:宽度1920,单位像素,高度自定义:分辨率:72像素/英寸:颜色模式:RGB,8位:背景色:透明:可存储预设,下次新建的时候,直接在预设中,选择那个名称,点确定.视图:显示- ...
- 前端切图|点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...
随机推荐
- nginx配置https并强制http自动跳转到https
关于使用HTTPS/SSL的必要性,可以自行baidu,援引的说法,EFF(Electronic Frontier Foundation),全球过半流量采用https. https://www.osc ...
- 08: python基础练习题
1.while循环实现输出2 - 3 + 4 - 5 + 6 ... + 100 的和 # 使用while循环实现输出2 - 3 + 4 - 5 + 6 ... + 100 的和 s = 0 i = ...
- zabbix-server新增zabbix-agent
zabbix监控系统搭建好了之后,就需要为各种角色host加入进来,现在新增一台zabbix-agent: 1.在172.16.23.128上安装zabbix-agent,zabbix-server: ...
- C# 将文件转换为 Stream
public Stream FileToStream(string fileName) { // 打开文件 FileStream fileStream = new FileStream(fileNam ...
- 瞎折腾之Webhooks
之前听学长介绍过webhooks,也知道有这个东西,但没有真正的用于项目部署,长久以来一直过着“刀耕火种”的生活......长久以来,都是这么更新代码的: 由于之前做的项目刚刚上线,需要对其进行持续的 ...
- Ubuntu 14.04 下解决maven访问速度慢问题
参考: maven国内镜像(maven下载慢的解决方法) maven中央仓库访问速度太慢的解决办法 Ubuntu 14.04 下解决maven访问速度慢问题 在启动OVX的时候,由于sh脚本中需要使用 ...
- python 编程基础练习 第一天
python 编程基础练习 第一天: 需求: 1.计算2的38次方,180*0.7输出(精度显示正常), x的y次方,数字倒序输出即345876输出678543,方法越多越好. 2.字符串处理: 1) ...
- 【NOI2013】向量内积
定义两个$d$维向量${A=[a_1,a_2....a_n]}$,${B=[b_1,b_2....b_n]}$的内积为其相对应维度的权值的乘积和: $${\left \langle A,B \righ ...
- linux设置端口转发(一键设置)
linux设置端口转发 #下载rinetd程序并进入文件夹 wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xv ...
- ci与cd的全称
Continuous Integration (CI) / Continuous Delivery (CD)