点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范
PS常用工具
移动工具
移动工具主要负责图层、选区、等的移动、复制操作。
快捷键:v
抓手工具
快捷键:h
空格 + 鼠标左键拖动,空格键可临时转换为抓手工具。
放大镜工具
放大镜工具可以放大或缩小图像。
放大:点击放大工具,点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。
缩小:点击缩小工具,点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。
文字工具
快捷键:t
文字工具是用来输入文本的。
吸管工具
快捷键:i
标尺工具
标尺工具可以用来测量图像的高度或者宽度。
属性栏: x 和 y:绘制的起点坐标。 W:标尺投射到 x 轴上的宽度。 H:标尺投射到 y 轴上的高度。(正负仅代表方向,x 轴方向向右,y 轴方向向下)。
切片工具
根据用户需求截出图片中的任何一部分,同时一张图上可以切多个地方。另存为 web 所用格式的时候能将所 切的各个部分分别保存成一张图片,完全区分开来。 保存时可选择图片格式以及切片类型。
制作表情包
将表情素材调入PS中;
再找一张脸部细节丰富的人物照片,同样调入PS里;
利用套索工具,将人物中表情部分扣取下来,拖入表情素材内。Ctrl+T调整一下表情的尺寸,让它和素材大小协调;
Ctrl+Shift+U首先对表情部分去色,然后按下Ctrl+M调出曲线工具,将对比度压低,整个表情打亮。这里特别说一下,挑选素材图时一定要注意去找那些面部打光均匀的照片,避免存在明暗过渡明显的“阴阳脸”,否则会给后期图片处理带来很多麻烦;
双击表情图层,然后按住Alt键依次拖动混合颜色带右侧两个高光滑杆,你会发现表情就完美地嵌入到素材中了;
常见的图片格式和特点
格式优点缺点使用场景
jpg
色彩丰富,文件小
有损压缩,反复保存图片质量下降明显
色彩丰富的图片/渐变图像
gif
文件小,支持动画、透明,兼容性比较好
只支持256种颜色
色彩简单的logo/icon/动图
png
无损压缩,支持透明,简单图片尺寸小
不支持动画,色彩丰富的图片尺寸大
logo/icon/透明图
webp
文件小,支持有损和无损压缩,支持动画、透明
浏览器兼容性不好
支持webp格式的app和webview
CSS精灵
什么是 CSS 精灵
英文叫法 CSS sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位“
Document
.box {
width: 50px;
height: 50px;
background-image: url(./images/jingling.jpg);
}
.box1 {
background-position: -150px 0;
}
.box2 {
background-position: -200px -50px;
}
CSS 精灵优缺点
优点:
减少网页的 http 请求,从而大大的提高页面的性能;
图片命名上的困扰;
更换风格方便。
缺点:
必须要限定容器大小符合背景图元素位置,需要计算
CSS小箭头
Document
body {
background-color: blue;
}
* {
padding: 0;
margin: 0;
}
.box1 {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent red;
position: absolute;
top: 0;
}
.box2 {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent blue;
position: absolute;
top: 0;
left: -10px;
}
.wrap {
width: 100px;
height: 200px;
margin: 0 auto;
position: relative;
}
BFC (Block Formatting Context) 块级格式化上下文
什么是bfc?
Formatting Context:指页面中的一个渣染区域,并且拥有一套渣染规则,他决定了 其子标签如何定位,以及与其他标签的相互关系和作用。
BFC块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与, 该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
怎样生成BFC
根标签
float的值不为none
overflow 的值不为 visible
display 的值为 inline-block
position 的值为 absolute 或 fixed
BFC的特性
内部的标签默认会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发 生重叠。
每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此。
BFC 的区域不会与 float 的标签区域重叠。
计算BFC的髙度时,浮动子标签也参与计算。
BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签, 反之亦然。
BFC解决的问题
外边距塌陷
清浮动
两栏或者三栏自适应布局
阿里矢量图标
标签:BFC,块级,标签,css,工具,border,transparent,CSS
来源: https://www.cnblogs.com/whispers-zhao/p/14255516.html
点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...相关推荐
- 如何在基于vue-cli的项目中,使用精灵图 css sprite
新钛云服已为您服务1236天 CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图. 就是将多张比较小的图片有规则的合并成一张背景图,然后再 ...
- UE 某图局部 展UV 图标 / CSS 精灵图(sprite) 好像
CSS精灵图(sprite) 另:字体图标 三十二.精灵图&字体图标 - 简书 一般美术负责展UV 程序会进行简单的展UV 比如图标 UE 截取某图局部展示在屏幕/canvas/画布中 展U ...
- 软件工程之PERT图和项目活动图考点(软考中级)
文章目录 1.软件项目管理 1.1 PERT图 1.2 项目活动图 1.软件项目管理 1.1 PERT图 (1)学习目标 1.会计算最早时刻 2.会计算最晚时刻 3.会计算松弛时间 4.会计算关键路径 ...
- html精灵图坐标如何确定,背景设置及精灵图
背景色.box{ width:450px; height:450px; border:1pxsolid aqua; background-color:burlywood; /* 背景色默认可以从内边距 ...
- html背景图不显示_批量显示多张有序排列的图标,使用精灵图CSS Sprites这种办法...
让你显示一个天气图标你会怎么显示呢?让你做一个简单的动图你会怎么采用什么方式呢?让你输出一个长期固定的图标列表你会怎么编写代码呢? 如果不管性能,不用css,不用js,可能你会这么写html: < ...
- css实现旋转的小箭头
思路: 先给div元素设置相对定位 再给div的伪元素设置绝对定位,然后将其调整到相应的位置 然后再利用c3里面的旋转知识,制作一个倒立的小箭头 最后,当鼠标移到小三角上时,小三角旋转225度 代码如 ...
- 纯css实现各种方向小箭头
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用. 原理:一个高宽相等的正方形,选取你所需要的某一边 ...
- html中展开的小箭头,纯css实现各种方向小箭头
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了 梯形 Document .arrow { width: 10px; he ...
- day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具 常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文 阿里矢量图标 day0 ...
最新文章
- python实现yolo目标检测_从零开始PyTorch项目:YOLO v3目标检测实现
- wcf客户端动态嗅探服务实例
- OpenCV实现RGB颜色空间和HSI颜色空间的相互转换
- copyMakeBorder函数
- 位图排序(计数排序)
- 【DP】K星人的语言(2020特长生 T3)
- 震惊!程序员要放弃 Python 了!?发生了啥?
- dhcp 服务器发出了 dhcpnack 消息,跪求DHCP报文分析
- java类加载体系,Java类加载体系
- Vquery PHP 简单爬虫类
- 使用Python face_recognition 人脸识别 - 12 人脸图片1-N比对
- matlab直方图拉伸、均衡化和匹配
- Elastic Sketch: Adaptive and Fast Network-wide Measurements
- recall和precise的区别
- 袋鼠云数栈UI5.0体验升级背后的故事:可用性原则与交互升级
- 苹果开发者账号申请流程(公司)
- 计算PI(π)的方法
- 输入经纬度城市名调用第三方地图软件自动规划路线导航
- OFDM--IDFT实现
- 为什么1024是程序员节
热门文章
- python实现cc攻击_网站如何防CC攻击–巧用nginx
- CSS 文章段落样式
- 电脑计算机软件硬盘不足,电脑硬盘存储空间严重不足,软件没几个。但是130G的几个盘都满了...
- python爬虫保存图片和文件
- 外用药祛除痤疮,对皮肤的影响。
- C#调用Python脚本训练并生成AI模型(以Paddle框架为例)
- 【Unity自学01】3DMax模型导入Unity轴与尺寸的注意事项
- zabbix3.0 自定义模板
- 2007年度二十大优秀装机工具
- mysql模拟题三_mysql经典45题(3刷)