CSS面试须知--关于图片
常见的图片格式：
- jpg图像格式：
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的 - gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果 - png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景 - PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。
使用图片的规范
内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
- 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
- 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
- PC平台单张的图片的大小不应大于 200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
- PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
- 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
- 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
插入图片和背景图片区别
- 插入图片 ，用的最多， 比如产品展示类 移动位置只能靠盒模型。 padding margin
- 背景图片我们一般用于小图标背景 或者 超大背景图片 。 背景图片 只能通过 background-position
精灵图 （针对背景图）
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
方法：
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
- 需要使用CSS的 background综合写法，其中最关键的是使用background-position 属性精确地定位。
字体图标
优点：
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备很需要
使用流程：
- UI人员设计
- 前端开发人员转换成页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站：icomoon字库 - 下载兼容字体包
- 字体引入到HTML
得到压缩包之后，我们得知字体图标 本质就是 字体文件。 这个压缩包不要删掉！！！！！！
4.1 首先把 fonts文件夹放入我们 根目录下 。
4.2 html标签内里面添加结构
4.3 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
4.4 给盒子使用字体
span {font-family: "icomoon";}
4.5 如果后续需要，我们还要追加字体图标 （这里就体现出上边压缩包没有删除的重要性了）
原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做：把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。
网站ico图标
首先把favicon.ico 这个图标放到根目录下。
再html里面， head 之间 引入 代码。
<link rel="shortcut icon" href="favicon.ico" />
制作ico：
- 首先把我们想要的切成图片。
- 要把图片转换为 ico 图标，我们借助于第三方转换网站： 比特虫。
LOGO的优化
- logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片
- 连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
- 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
- 直接给font-size: 0; 就看不到文字了， 京东的做法。
- 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了
知识点内容来自教学视频，自己总结归纳。
CSS面试须知--关于图片相关推荐
- CSS面试须知--盒子模型、浮动及定位
盒子模型: 将HTML页面中的布局元素看作是一个矩形的盒子 一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) 内容 ...
- CSS面试须知--选择器
选择器 标签选择器 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 类选择器 (可以多类名) .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签 中 ...
- CSS面试须知--样式属性
属性书写顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,关系到模式) 自身属 ...
- CSS面试须知--显示模式及三大特性
显示模式 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 块级元素:block div h1-h6 hr p ul ol li dl table address bl ...
- python面试技巧和注意事项_Python 程序员面试须知须会的5个问题
原标题:Python 程序员面试须知须会的5个问题 作为一个程序员,可能或多或少经历过一些技术面试,有些是编程语言本身的问题,有些是跟工程相关的问题.今天我们来总结关于Python程序员面试的时候经常 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- HTML CSS 面试题解（不定期更新）
1. HTML基础强化 HTML重要属性 a [href,target] img [src,alt] table td [colspan,rowspan] form[target,method,enc ...
最新文章
- MIME文件类型格式--汇总
- python怎么安装requests库-Python3.6安装及引入Requests库的实现方法
- 吴裕雄 python 机器学习——数据预处理标准化StandardScaler模型
- 男生的哪个“不要”是真的不要？
- oracle segment undo_Oracle Undo工作原理
- java2017下载_Download Java for OS X 2017-001
- GDataDate 的本地时间转换
- 小白学习Python的一点建议
- 小说app开发功能及盈利方式
- 1_数据分析应掌握的Python基础
- 使用腾讯OCR进行文字识别
- 生活随记 - 准备过苦日子咯^_^
- python搜索文献 速成_0基础5天速成Python，你也能发top期刊
- Vue 图片压缩并上传至服务器
- 浅谈信息技术在石油行业数字化转型中的运用
- Ducky Debugging（字符串输入）题解
- 数字电路硬件设计系列（十三）之HDMI电路设计
- c语言程序点亮数码管,怎样点亮数码管
- 活动星投票趣味猜灯谜做投票系统制作二维码投票
- 有关SEO效果评估的七大指标你知道吗？