背景样式详细基础篇

背景样式：

层级优先：content>border>background-image>background-color

背景样式种类：

overflow：hidden；超出隐藏（隐藏超出内容区的文字）

white-space：nowrap；不换行（文字不自动换行）

word-break：break-all；强行换行（数字，字母不空格时浏览器默认不换行）

overflow：ellipsis；超出隐藏用省略号代替（要与white-space：nowrap连用省略号才会显现）

-webkit-line-clamp：3；超出多行省略号（第三行后省略）后若还有依旧显现文字，文字显由内容区大小显示。/使用范围/

完整代码—display：webkit-box；-webkit-box-orient：-vertical；-webkit-line-clamp：2；谷歌浏览器下使用

border边框
background-color：背景色（可写英文、16进制、rgb、rgba）
background-image：背景图片
background-repeat：no-repeat；取消背景平铺
background-attachment：fixed；背景样式固定不动，背景不会随元素滑动（需要放在滚动元素里面）

/网页出现滚动条当body高度大于浏览器可视高度时出现/

background-attachment：scroll；
背景滚动 /网页默认样式/

background-attachment：local；相对于内容固定，背景滚动

background-position-x：10px；
background-position-y；10px；
定位（x y轴偏移量 元素默认左上角 偏移大小用px 可为负值）
background-position：x y；复合写法
例：background-position：10px 20px；

精灵图：

出现原因：实现网站优化，减少请求次数，多张图片请求一次，减少资源浪费，提高网站响应速度。
（现在多用阿里图标，精灵图作为考试项目）
/公司老项目维护，小网站会用到。是网页优化的方法之一/**

背景图片在内容区不完全显示改变尺寸时：

background-size：100px（高）100px（宽）背景图片尺寸
等比例缩小图片：
1:background-size：contain（包含）；完全显示式等比缩放。
2:background-size：cover（覆盖）；不完全显示式等比缩放，三遍填满内容区停止缩放。
background-size：100%（宽） auto（高度）；/auto为等比缩放，根据另外一个值进行缩放，另一个值改变auto改变/交换同理

background-size：auto auto；（显示原图尺寸）
background-size：可以只写一个值另外一个值会默认auto```
background-size：只有两个值，为高 宽

background：color（red）url（背景图地址）no-repeat （取消平铺）attachment（scroll）position（10px 10px）/size（100% auto）+width：+height：+border：

基点对齐：图片铺设范围 border-box padding-box content-box /定义背景图片左上角的位置/