CSS4:icon全解

LinkedME2016 发布于2019-08-30 15:53 / 907人阅读

摘要：全解法如何在文件里扣出图层里的图标右键选中这个图层右击这个图层把这个图层放到新文件点击图片的按钮自动切图到最小再调整一下画布大小将图片设置为长宽一样导出即可在页面里图片会默认保持比例所以只要设置宽高的其中一种就可以了抠图的前端现在基本没有了

CSS4:icon全解 1.img法 1.1如何在psd文件里扣出图层里的图标

右键选中这个图层

右击这个图层,把这个图层放到新文件

点击图片的trim按钮,自动切图到最小

再调整一下画布大小,将图片设置为长宽一样
导出PNG即可

在页面里,PNG图片会默认保持比例,所以只要设置宽高的其中一种就可以了

抠图的前端现在基本没有了.属于落后的技术

1.2 如果设计师给的是PNG(设计师不专业)

用PS扣.具体步骤是选中按钮,crop,得到新图片,魔棒工具选中按钮,反选,删除背景,trim后,调整大小

1.3第一种引入图标方法代码

直接使用img标签

2.background-icon 法 2.1第二种引入图标方法代码

将图标当做div[display,inline-block]的背景图.
好处是图片大小固定,不随div宽高改变而改变

2.2 精灵图(雪碧图) sprites

直接搜 CSS sprites Generator,直接生成
不要自己手动做,麻烦
css.spritegen.com

上传PNG文件,自动生成一个整的文件

图片另存为,然后复制代码

粘贴代码,做修改

雪碧图方法老套,现在很少用了.

3.iconfont-HTML形式

使用iconfont.cn网站
大概原理:把字体变成图标,用什么字体中的字母就有什么图标

3.1iconfont.cn使用方法:

iconfont.cn

很多图标添加至购物车

把这些图标组成一种新字体.

知识点:html字符实体

如果实体编号大于某个数值了,就以x开头,x表示为16进制.比如"你"的编码

也就是说所有的符号,大于小于,空格,文字,都可以用实体编码表示,浏览器会解析

所以

使用字体

使用方法:

4. iconfont-CSS形式

可以使用伪类CSS来添加图标

4.1第二种用css简便方法

当只用iconfont类的时候,告诉浏览器我这个容器要是用iconfont字体.
源代码:原理

第二个class就是写里面是什么图标
然后用span

这种方法也快要被淘汰了,接下来看第三种方法

5.SVG icon(推荐使用)

目前大家优先使用这样一种方法

5.1使用sketch做一个SVG图,插卡看SVG图特性

SVG其实是一段代码
浏览器可以解析这段代码,将它变成图形
渐变,五角星位置,都是代码,根据代码,就可以生成图形

只要将代码放到浏览器,就可以出现图片

5.2使用iconfont.cn引用SVG

查看帮助文档

1,2引入js和style,3直接使用

SVG是矢量图,不会失真,默认居中

如果是没有颜色的SVG,可以用fill属性来改,如果有颜色,就不能用了.也可以给svg描边

以后做图标就是SVG的时代了,他可以渐变,可以不失真,甚至可以动
推荐在任何时候都用第三种SVG方式

6. 用 CSS 干 icon(不推荐使用)

cssicon.space
只用css做出图标

云服务器 GPU云服务器超全解大数据技术全解阿里云服务器ecs配置全解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116733.html

lisahost：美国新的全解锁原生IP 206段上架开售，支持tiktok等，季付122元起

摘要：怎么样好不好最近美国新的全解锁原生段上架开售，支持等，原一期产品可加价更换年付免费更换，美国原生段仍有少量剩余，套餐原价基础上每月加价元可更换美国原生，更换的为纯净新分配美国段，绝对传家宝产品，支持解锁美区游戏，，等，同时支持。lisahost怎么样？lisahost好不好？lisahost最近美国新的全解锁原生IP 206段上架开售，支持tiktok等，原CN2一期产品可加价更换(年付免费...

xingqiba 2021-09-23 11:51 评论0 收藏0
艾云：聖何塞IP更換完成，原生IP，全解流媒體，G口帶寬，月付15元起

摘要：艾雲怎麼樣，艾雲好不好，昨天收到艾雲家發的消息，商家宣布聖何塞機房的都已經更換完成，全部更新為原生，商家還提供一張圖，幾乎是全解，目前聖何塞機器的價格還是比較便宜的，月付元起，給的是口的帶寬，自帶的防禦，同時商家還推出了一個特價年付套餐，有艾雲怎麼樣，艾雲好不好，昨天收到艾雲家發的消息，商家宣布聖何塞機房的IP都已經更換完成，全部更新為原生IP，商家還提供一張圖，幾乎是全解，目前聖何塞機器的...

yuanzhanghu 2021-09-03 10:40 评论0 收藏0