摘要：如果只指定其中一个值，另一个值会被设定为因此可以和混用。通过设定负的，背景图像的一部分被拖拽到父元素之外，从而在父元素之内显示要显示的内容。随着的普及，相信渐变将成为主流。可以显示的显示范围。
作为一个有理想有包袱的页面仔，正像鑫哥在这篇文章说说CSS学习中的瓶颈
(强烈推荐)里说的
其实，广大页面屌丝们并不畏惧那些学习能力强的人，畏惧的是那些学习能力强，同时，尼玛学习又拼命的人。
页面仔们，扪心自问下：我每天几点下班？我每天下班后都干嘛了？我有专门花空余时间深入理解学习CSS的一些东西吗？我能够连续坚持数月吗？
最后，我只说一句话：“吃得苦中苦，方为人上人”。
个中滋味，看到这篇文章的人请去链接处细细品读。这篇文章，也是你现在看到的这篇blog的来由。
不说废话，let"s rumble。
background的简写支持以下属性:background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment。下面分别解析。
关于background-position和background-size合用如果同时定义background-position和background-size，必须使用/来分割它们。例子：background:url(smiley.gif) 10px 20px/50px 50px会让background-image离父元素顶部20px,左边10px,同时大小被限制在50px*50px(这里的background-size不同于background-clip，会强制限定背景元素的显示大小，你也可以指定为auto auto,会根据背景图片的原始大小显示。但这里不能指定为initial initial,会报错。
下面来一项一项说明。
background-color为元素提供一个背景色。默认为transparent。可以使用颜色名，Hex,rgb和rgba等。background-image在会覆盖在其上。为了良好的兼容性，在使用简写形式时最好写在最后一项。W3SCHOOL原文:
background-imageIf using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
如果使用多重背景图片和背景颜色，那么背景颜色参数需要在最后一项
元素的background范围覆盖了content, padding和border，但不包括margin.
格式为background-image:url("URL")。如果想设定多重背景，以comma(,)分割url
注:IE8及之前版本不支持多重background-image
默认值为0% 0%.
可以简写为属性: background-position:x y; x和y的取值可以有以下形式：
关键字：x = [x for x in [left, right, center] y = [x for x in [top, center bottom]]. 咦我是不是一看到这种矩阵就想写generator? 以上表达式翻译成人话就是：x可以取left, right, center中的任意值，y可以取top, center, bottom中的任意值.如果只设置一个值，另一个会被自动设置为"center"
百分比:父元素的左上角为0% 0%, 右下角为100% 100%。注意这里的百分比同时被应用在-背景图片元素的定位点到父元素左上角的距离-和-背景图片自身的定位点到背景图片左上角的距离。也就是说，如果我们设置background-position为50% 50%,背景图片会在父元素里居中显示，因为此时背景图片的定位点位于背景图片内部50% 50%处，同时这个定位点和父元素左上角的距离也是(父元素宽度和高度的)50% 50%.关于这一点，在精通CSS第二版的第56页有更加形象和专业的描述
pixel或者其他任何有效的CSS单位.关于CSS单位，将是下一篇文章要探讨的内容。如果只指定其中一个值，另一个值会被设定为50%. 因此可以和%混用。
说到这里css sprite技术就很好理解了。通过设定负的px，背景图像的一部分被"拖拽"到父元素之外，从而在父元素之内显示要显示的内容。
可以设定为：
auto.为背景元素图片的默认值
length.任何有效的CSS单位
percentage.父元素宽度和高度的百分比
可以清楚地看到，随着父元素的拉长，基于父元素百分比的background-size也被拉长了。
cover.使父元素的最长边被背景图片所覆盖。在父元素的较短边上，可能会截取一部分背景图片。
contain.使父元素的最短边被背景图片所覆盖。在父元素的较长边上，可能会留白。
background-repeat大家很熟悉的属性了。旧时代常常使用repeat-x和repeat-y加图片切片来实现背景图片的渐变效果。随着CSS3的普及，相信CSS渐变将成为主流。在线的渐变生成器请见本文最后。
background-origin和CSS中的box-sizing属性很像，只不过box-sizing是用来定义长和宽，background-origin是用来定义背景图片的起始位置。
取值：
默认值为padding-box.从padding的左上角开始显示background-image.
border-box.从border的左上角开始显示。
content-box. 从content的左上角开始显示
更多演示
和background-origin的取值一样，也有三种:padding-box, border-box和content-box。可以显示background的显示范围。
更好玩的是可以实现background只在text内显示。详见[这篇文章]（http://www.w3cplus.com/content/css3-background-clip）
指定background是否和内容一起滚动
CSS3 linear-gradient可以直接设定background:linear-gradient。W3C链接
请忘记那些该死的语法吧，专注于设计。使用这些在线生成器来生成渐变代码。
链接1
链接2
链接3
写到这里，感觉自己有点三分钟热情了，内容越写越简略，果然自己还是不适合长时间码字啊。本篇文章会继续更新补充未完成内容，同时向大家推荐一个网站W3Cplus,共同学习！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115266.html
摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。 我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...
摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。 我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...
阅读 2566·2021-11-23 09:51
阅读 2479·2021-09-30 09:48
阅读 1073·2021-09-10 10:51
阅读 2208·2021-08-12 13:22
阅读 3563·2021-08-11 10:24
阅读 2164·2019-08-30 15:55
阅读 641·2019-08-30 14:05
阅读 3207·2019-08-30 13:03
