标签：体验 默认值 body 这一 use str 需要 origin tar
When to use IMG vs. CSS background-image?
img：
alt和title属性可以提供好的用户体验；
可以等比例缩放；
提供更好的动画性能；
当图像属于内容的一部分：图标、图解、头像等；
打印的时候默认会引入图片
从SEO角度来看：当需要被搜索引擎来索引到的时候使用img
background-image：
使用精灵图时：提升请求效率以及可以控制图片的部分显示时使用bg-img;
配合 background-size:cover 可以拉伸铺满
这是一个css属性，可以配合过渡来使用
连续重复显示图像
如果非要使用background-image，而且鼠标移动上去有title提示：i 标签显示背景图，外面包一层a标签，a标签上设置title
https://www.w3cplus.com/content/css3-background-size
补充：
background-position 取值为px时，基准点为左上角
size设置的值都会拉伸图片
https://www.w3cplus.com/content/css3-background-clip 这一节没看懂。
1.设置容器宽高限制视窗的大小（一般容器为 i 标签）
2.设置background-image
3.设置background-position 控制背景图片在视窗中的位置，以显示sprite中的不同图片
4.不设置background-size
1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；
2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；
3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；
<!DOCTYPE html> <html lang="en"> <head> <title>Event Propagation</title> <style> div{ height: 50px; width: 100px; border: 10px dashed #333; padding: 20px; background: url(‘2x3x/imgs/brand@2x.png‘) no-repeat green; } </style> </head> <body> <div></div><br> <div style="background-origin: border-box"></div><br> <div style="background-origin: content-box"></div><br> </body> </html>
运行效果：
标签：体验 默认值 body 这一 use str 需要 origin tar
原文地址：http://www.cnblogs.com/hellohello/p/7923164.html
