CSS backgrounds

css可以为html设置背景，背景可以是单纯的颜色，也可以是图片，下面是background的一些属性以及应用；
background-color，直接设置某种颜色作为背景，书写规则为：p{background-color：black；}，background-color没有继承性，即你可以为文档中任何元素设置颜色，子代不会继承父级，其中CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”；
background-image：用背景做为html的背景，书写规则是body{background-image：url（‘bgdesert.jpg’）；}即用{}括起来，然后background-image加：加url，注意，url后面的图片地址要用（）来引用，还要注意要有‘’；
上面介绍的是背景的两种模式，下面来介绍背景的一些格式设置问题；
background-repeat：一般你直接设置图片作为背景的话，都是默认将图片平铺到整个网页，那么在阅读的时候肯定会影响美观，所以可以用background-repeat来设置是否要平铺，或横向平铺或纵向平铺，例
body
{
background-image:url(’/statics/images/w3c/logo.png’);
background-repeat:no-repeat;
}

background-repeat：repeat-x是将背景图片横向平铺，background-repeat：repeat-y是将背景图片纵向平铺，但是有的时候平铺图片会影响文字等内容的阅读，那么如果不想将背景图片平铺的话可以是background-repeat：no-repeat
background-position：是指图片所在的位置，一般有以下几种:
{
background-image:url(’/statics/images/w3c/logo.png’);
background-position:right top;}图片在右上方，同理，right center，右中；right bottom 右下；center top：中上；center center：中中；center bottom：中下；left top：左上；left center：左中；left bottom：左下；
另外，position不只是这一种设置，还可以用百分比设置，例如{background-position:50% 50%；}那么图片也可能设置为中间位置，还可以根据宽度和高度进行设置，具体要看应用场合来定；
background-attachment：背景是否固定或者跟着页面内容一起滚动；
{background-attachment：fixed；}背景固定；
{background-attachment：scroll；}背景跟随页面内容滚动，一般是默认的；
background-size：指定背景图片的大小
{
background:url(’/statics/images/course/img_flwr.gif’);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-origin：指定背景图像的定位区域；
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
值
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip：指定背景绘制区域；
{
background-color:yellow;
background-clip:content-box;
}
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
这些都是CSS background比较基础的一些属性，可以根据不同属性进行实际操作来做对比，从而知道他们的一些区别，现在不太理解没有关系，学习盒子模型后会更加理解。