摘要：将保持背景的原始高度和宽度。对于平铺的重复性背景图像，确保背景图像不会有截断效果。解决屏幕双倍像素下背景图像模糊问题。将大图缩小一倍使用链接或者列表元素的背景图像能和文本一起进行缩放。内联元素背景图像平铺循环方式暂无文章多背景
CSS背景属性 基本属性
background-color: 默认值为transparent，可以以"颜色名"、"rgb(css3新增rgba)"、"hls(css3中新增hlsa)"、"十六进制"的方式设置颜色值
background-image: none(默认) || url()
background-repeat: repeat(默认) || repeat-x || repeat-y || no-repeat
background-attachment: scroll(默认) || fixed
注意：background-attachment取值为fixed时，需要运用在html或body标签上。使用在其他标签上没有固定效果。
background-position：水平位置 垂直位置
说明：一般来说，背景图片的左上角是和元素的左上角对齐的，background-position这一属性可以改变背景图片与元素的对齐点。
先来看看水平位移和垂直位移单位都是px的时候：
background-position: 30px 50px
以元素左上角为坐标原点，水平向右延展方向为x轴正轴，垂直向下延展方向为y轴正轴。那么此时图片的左上角与元素的(30,50)坐标点对齐。
现在来看百分比的情况：
计算方式为：
水平偏移x：（元素宽度-图片宽度）*百分比
垂直偏移y：（元素高度-图片高度）*百分比
此时同样的，图片左上角跟计算出的元素的(x,y)坐标点对齐。
当然啦。实际做项目的时候我们不会这么麻烦的去计算，这里只是总结一下它的计算方式。
实际项目中只需要记住：
1、背景图片水平垂直居中:
background-position: center
2、雪碧图情况：
原理跟使用px的情况相似，这里不赘述了。可以去看看这篇文章：Click here
background-origin: 指定绘制背景图片的起点 background-clip: 指定背景图片的显示范围 background-size: 指定背景图片的尺寸大小（很常用） background-break: 指定内联元素的背景图片进行平铺时的循环方式CSS3 background-origin
该属性主要用来决定背景图片与元素对其原点的参考点。默认是以元素左上角为坐标原点进行对其，这一属性可以打破这一格局。
background-origin有三个属性：
padding-box：默认值。表明图片的原点和元素padding外边缘（border的内边缘）进行对齐。
border-box：表明图片的原点和元素border的外边缘进行对齐。
content-box：表明图片的原点和元素content外边缘（padding的内边缘）进行对齐。
浏览器兼容性：
现代浏览器都支持和ie9+。但是使用时还需要加上浏览器前缀。
如下：
/*old Webkit and Gecko*/ -moz-background-origin: padding || border|| content; -webkit-background-origin: padding || border|| content; /*new Webkit and Gecko*/ -moz-background-origin: padding-box || border-box || content-box; -webkit-background-origin: padding-box || border-box || content-box; background-origin: padding-box || border-box || content-box; /*w3c标准*/
例子：
1、padding-box
2、border-box
3、content-box
CSS3 background-clip该属性用来定义背景图片的裁剪区域。这样说得会比较抽象，稍后会通过实例为大家说明。
属性：
border-box: 背景图片在边框下(边框外边缘，不会超出边框),默认值 padding-box: 背景延伸到padding的外边缘，但不会超出边框范围(默认) content-box: 背景仅在内容区描绘，不会超过padding和边框范围
是不是觉得似曾相识呢？没错，就是background-origin刚刚提到的三个属性。
浏览器兼容性：
在Gecko内核浏览器（FF3.6-）不支持content-box，并且使用border和padding来代替标准语法中的border-box和padding-box
safari5能够在标准属性中支持border-box和padding-box，但content-box属性值也需要加上-webkit-前缀
我们先来看看默认情况下如果背景图片超出了元素的范围，元素会对背景图片进行怎样的裁剪。
测试图片200宽200高。
repeat：
/代码：/
.box {
width: 260px;height: 150px; border: 10px dashed lightgreen; background-color:slateblue; background-image: url(img/test.jpg); background-repeat: repeat;
}
效果：
no-repeat：
/代码：/
.box {
background-repeat: repeat;
}
效果：
默认情况下：
背景平铺时会填满整个元素，包括border的范围。此时border-color完全在background-image下，而且background-image从元素边框左上角起到元素边框右下角止。但background-position的起始点却是从元素的内部补白（padding）外边缘开始。
背景不平铺时border-color从元素边框左上角起到元素边框的右下角边缘止，background-image从内容补白（padding）外边缘的左上角起到元素边框的右下角止。
现在使用background-clip属性可以改变背景图片的填充范围。
默认情况下，background-clip为border-box。
background-clip为padding-box时：背景图片的填充范围为，元素padding外边缘左上角到元素padding外边缘右下角。注意此时背景颜色的填充范围也会改变。
平铺时：
不平铺：
background-clip为content-box时：背景图片的填充范围为，元素padding内边缘左上角到元素padding内边缘右下角。注意此时背景颜色的填充范围也会改变。
平铺时：
不平铺：
CSS3 background-size现在来看一个用得相对比较多的属性。background-size属性可以用来指定背景图片的尺寸，可以控制背景图片在水平和垂直两个方向上的缩放，也可以控制图片拉伸覆盖背景区域的方式。背景图片能够自适应元素盒子的大小。
属性：
background-size: auto |||| || cover || contain
auto: 默认值。将保持背景的原始高度和宽度。
100%。注意这个值是对于元素的宽度进行计算的，计算出来的宽高值再作为背景图片的宽高值对背景图片进行缩放。
cover: 将背景图片宽度或者高度放大，以使图片宽高能适应铺满容器宽高较大的一方，但不同于background-cover:100% 100%的方式。
1、宽度为100，高度为250
2、宽度为250，高度为100
3、宽度为80，高度为100
contain:保持背景图像本身的宽高比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。
当background-size只取一个值时，另一个值自动设为auto。
浏览器兼容性：
ie9+以及其他主流。老版本浏览器需要加上前缀。
background-size的其他适用场合：
在流体布局或者响应式布局中，确保背景图像能始终适配容器大小。
对于平铺的重复性背景图像，确保背景图像不会有截断效果。
解决Retina屏幕双倍像素下背景图像模糊问题。（将大图缩小一倍）
使用链接或者列表元素的背景图像能和文本一起进行缩放。
其他新增CSS3背景属性因为这两个属性浏览器兼容性比较差，项目中使用较少，所以这里不进行具体总结了。收集了一些相关的文章供有兴趣的小伙伴进行阅读。
1、内联元素背景图像平铺循环方式：暂无文章
2、CSS3多背景：Click here
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111214.html
摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...
摘要：选择器统览的选择器及其对应的浏览器兼容性前端观察这篇文章已经详细总结了通过测试有如下更正或说明注下述浏览器兼容性以表示，表明以及以上版本。 CSS1、2、3选择器统览 css1、2、3的选择器及其对应的浏览器兼容性前端观察这篇文章已经详细总结了：Click 通过测试：有如下更正或说明： 注：下述浏览器兼容性以x+表示，表明x以及x以上版本。 动态伪类选择器E:active：若E为锚...
摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。 第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...
摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。 本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...
摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。 本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...
阅读 709·2021-11-18 10:02
阅读 1372·2019-08-30 15:56
阅读 2472·2019-08-30 13:47
阅读 2491·2019-08-29 12:43
阅读 643·2019-08-29 11:19
阅读 1627·2019-08-28 18:23
阅读 2554·2019-08-26 12:23
阅读 2884·2019-08-23 15:29
