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 ...
随机推荐
- Github使用教程(一)------ 初识Github
上一节我们解决了Github网站响应慢,加载不完全的情况,接下来我们就要正式开始使用Github了. :好,那我先安装Git,稍后就上传项目. :......你Github网站都看懂了? :还需要看懂 ...
- mpvue小程序开发入门级指南
报错指南 "Error: ERR_GET_SESSION_KEY {"code":5100,"message":"(-1)服务内部错误,请稍 ...
- Asterisk1.8 转码策略分析
最近在修改asterisk转码和编码协商的问题,发现asterisk的转码策略的选择还是有些问题的(基于1.8.9.3版本).——————————————相关的CLI命令转码路径的调试命令:core ...
- SQLSERVER 数据从一张那个表复制到另一张表
insert into 表名1 ( 字段A ,字段B ,字段C) SELECT 字段A ,字段B ,字段C FROM 表名2 (where条件看情况而定)
- Python3基础 os.path.dirname 对路径字符串进行处理 返回所在文件夹的路径
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 2016年蓝桥杯B组C/C++省赛(预选赛)题目解析
2016年蓝桥杯B组C/C++ 点击查看2016年蓝桥杯B组省赛试题(无答案版) 第一题:煤球数目 题解 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个( ...
- requirejs配置代码示例
requirejs大致用法:通过定义模板define()再通过require()或requirejs()加载模板,paths是路径,如果路径长可以把它赋一个短名称加入ruquire()中,shim是兼 ...
- UVa 10570 外星人聚会
https://vjudge.net/problem/UVA-10570 题意:输入1~n的排列,每次可以交换两个整数,求出最少交换次数使之变成有序的环状序列. 思路:主要的解题方法就是寻找置换环,举 ...
- vue-echarts的使用及编译报错解决方法
一. 使用 vue-cli 快速构建vue项目, 引入vue-echarts组件 安装: > npm i vue-echarts --save 修改 webpack.config.js 配置: ...
- java 使用正则判断是不是一个数字
public class Numeric { public static void main(String[] args) { String string = "-1234.15" ...