搞定HTML\CSS之background属性

前言

   我为什么写这个呢？因为我看别人的源码的时候，样式表里有比如下面这样的字眼：

    background: url("../img/bg_idx_01.jpg") repeat-x scroll 50% 0 #FFFFFF;  

    而我吧，又是新手，只会background-color：、background-image：...这样的单独的用，肯定不如上面的方便，所以就学习做一下笔记。当然肯定是看官方的文档更好

   http://www.w3school.com.cn

background简写属性

  所谓的background简写属性也就是在一个声明中设置所有的属性，它可以设置的属性如下：

  background-color：规定要使用的背景颜色

  background-image：规定要使用的背景图像

  background-position：规定使用背景图像的起始位置

  background-size：规定背景图像的尺寸

  background-repeat：规定如何重复背景图像

  background-origin：规定背景图像的定位区域

  background-clip：规定背景的绘制区域

  background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动

  inherit：规定应该从父元素继承 background属性的设置（艾玛，好亲切，这和面向对象的继承一样吗？）（PS:IE7以及更早的浏览器不支持“inherit”。IE8需要加 !DOCTYPE。IE9支持“inherit”，呵呵，IE浏览器有多少在用）

  当然，如果不设置其中的某个值，也是允许的，不设置的就按照其默认值呗。比如我上面提到的

   background: url("../img/bg_idx_01.jpg") repeat-x scroll 50% 0 #FFFFFF;  它代表的就是如下图

background-color

  该属性就是定义背景的填充颜色，这个经常用到，尤其是在使用div分层的时候，经常用它看看层的分布情况，下面我首先将示例代码的层设为lightgreen颜色，如下

此时看效果发现啥颜色也没有，别急，这是因为div内没有内容就不显示style，当然我这话说的有点绝对，至于为什么，这里就不提了（和width height的默认值有关）。随便在div内加点东西吧，如下

background-repeat

  如上所述，该属性定义了图像的平铺模式，可能的值是：

 我在示例代码工程的img文件夹下存放了一个60*30的test.png图像下面我先什么都不用，先添加一个背景图像，代码如下

出现这样的效果是因为background-repeat不设置就按照repeat的效果展示，下面将在样式div1里加入background-repeat:no-repeat，

可以看到此时显示的就是1张图了，但是怎么看有点别扭，我的图像每个颜色块是正方形的，怎么就给我变成长方形了，看着长度好像够了，高度小了，下面变一下。怎么变？我第一次的时候想到用background-size来表示，比如background-size:90px 30px;如下

发现没有任何变化，恩，这个是因为层div的属性，按照层内容及数字1的宽度设置该层的高度，下面设置一下层的height，如下

为了更直观的看，我将层的高度设置了高于test.png的高度，此时图像显示完全了。

background-size

  看官方文档，该属性规定了背景图像的尺寸，上一步我将它的父元素div层的高度变成了60像素，该背景图像被完整的显示出来了，下面贴下该属性的值的内容

  上表列出了background-size的4种表现形式

  （1）background-size:length 表示

   这种表现形式就是咱们平常的理解了，即background-size:宽度 高度;如下图示例

  

  （2）background-size:percentage 表示

    理解这个属性肯能稍微有点困难，首先要理解上表所说的“以父元素的百分比来设置背景的宽度和高度”，这里背景图像的父元素就是引用它的层，即class为div1的层。下面通过代码比较不同

 

 为了方便比较，我将父元素即div层的宽定为180像素，高为60像素，（咱们测试图像实际的宽为90像素，高为30像素），如上图设置的background-size:50% 50%，即设置了背景图像显示的宽为90px（180px*50%=90px），高为30px（60px*50%=30px）。下面再改为background-size:100% 20%;如下

此时背景图片显示的宽为180px（180px*100%），高为12px（60px*20%），这样比较一下就明白了吧哈

（3）background-size:cover 表示

  直接上图说明

  

   该属性使得背景图像完全填充背景区域，即父元素。到这里就明白了吧，其实background-size:cover;就相当于background-size:100% 100%;（声明一下，红线划掉的句子我说错了，其实不然，保留也给自己警醒，我用PS做的这个test.png不能演示这个background-size:cover 和background-size:contain这两种效果，希望你可以去W3SCHOOL上看一下例子（点此查看），这两种和C#里边image的fill和strech一样）

（4）background-size:contain 表示

   上面一段文字已经说明，请去W3SCHOOL查看例子说明

  background-position

   它的语法格式如下：

   

    这个属性的作用是相当的牛啊，官方的解释是“规定使用图像的起始位置”。使用起始位置？这个怎么理解呢？网上有位博友，专门讲这个讲的特别细致，特别棒！他这篇博文点此进入，下面的解释也会有引用这位朋友的。

    通常的时候，有的网页使用的一些图标都存放在一个图像文件里，如

      

    要是换我的话，我会想到利用PS切图或者设计成单个的文件，但是利用background-position就可以实现“切图”效果。

    通常来说，在网页没有加载前，父元素div和图像img之间是独立存在于文件系统之中的

    

   在网页加载后，如果没有作特别的改动，背景图的左上角是默认与父元素div层左上角重叠的，也就是(0,0)位置

   

  此时background-posion如果不设置，默认的就是background-position:0px 0px;我的示例图没有设置该属性的时候，也是默认的左上角顶点对齐，如下图

  

  那么如果按照语法background-position:xpos ypos;这样的话，它的意思就是规定了背景图像的顶点(即左上角)位置相对于父元素的顶点沿x轴移动xpos个元素(xpos为负向左移动，为正向右移动)，沿y轴移动ypos个元素(ypos为正向下移动，为负向上移动)。

   比如我这里设置background-position:30px 0px;这个意思就是img背景图顶点向右移动30px，效果图如下：

   

   设置background-position:-15px -15px;这个意思就是img背景图顶点向左移动15px，向右移动15px,效果图如下：

   

   到这里举一反三，咱们就知道了如何使用该属性实现例如抠图，图标多态显示等问题了，不错，get了一个新知识！

background-origin

   该属性规定了背景图像的定位区域，通俗的理解就是背景图像的左上角顶点的位置在父元素div中的位置，上面我讲background-position的时候提到了“在网页加载后，如果没有作特别的改动，背景图的左上角是默认与父元素div层左上角重叠的，也就是(0,0)位置”，如果作了特别的改动，这句话就不适合了。

   先看它的语法特性如下：

   

    为了方便对上述三个值的效果作对比，我给class为div1的层添加了内间距padding和边距border，如下

   

  现在直接上效果图，在div层里添加语句background-origin: border-box; 效果图

   

   background-origin: content-box; 效果图如下

   

  background-origin: padding-box;效果图如下

   

  从上图也可以看出，background-origin在不设置的情况下默认是为padding-box的。

background-clip

   这个属性规定了背景的绘制区域，官方文档的语法如下：

  

  注意，该属性规定的是背景的绘制区域，那么什么算是“背景的绘制区域”呢？上面有三个属性选择（border-box、padding-box、content-box），下面我把背景图先屏蔽掉，因为这个和背景图无关。

  然后加上background-clip属性，做一下对比

        

这样做一下对比，其不同就显而易见了。同时可以看出background-clip在不设置时，默认为border-box。

background-attachment

   这个属性就不做解释了，比较浅显易懂，直接去官网看解释就可以了，点此查看。

/**************************************************分割线***********************************************************/

简写属性

   到这里，前面已经讲解了关于background的属性，下面该说一下它的简写语法了，正所谓抛砖引玉，前面的都是基础。下面我先写个简写例子，如下：

 其中 background:url(img/test.png) no-repeat 90px 30px lightgreen ; 这句话中的90px 30px，我的本意是想设置background-size:90px 30px; 但是效果展示出来的却是background-position的效果，经过查找资料，貌似是说background的简写属性如下：

  background:background-image   background-repeat   background-position   background-attachment   background-color;

  简写特性中不包含background-size，关于是否包含这个特性，我不敢武断的说是与否，只能说是先埋个伏笔，以后碰到了再回来解释。

 这样，前边引言中的我就看懂了

  

结语

  到这里，html中的background 我大概的搞明白了，下一节准备写另一个知识点。