CSS属性之------background

---恢复内容开始---

今天看了一下<css权威指南>，回想起前几天看的<css 揭秘>，发现background这个属性使用频率很高，并且属性也比较多，于是我决定仔细看一下这个属性，今天写一下background的基本概念和用法。

首先来了解一下background是哪些属性的缩写：

  • background-color
  • background-image
  • background-position
  • background-origin
  • background-clip
  • background-repeat
  • background-size
  • background-attachment

没错是8个属性的缩写，下面，一个一个看看这些属性。

1.background-color

这个属性是规定元素背景色的

1 body {
2     background: #ccc; /* 规定body的背景为#ccc */
3 }

 这个属性使用的时候注意点：

　　1.和其他属性混用的时候，要放在最后面，作为备用属性

 

2.background-image

这个属性用于给元素插入背景图片，特别要注意的是，<Gradient>产生的是一个图片，而不是background-color

使用定义：

1 background-image：
　<image>: [<url> | <linear-gradient> | <radial-gradient>]

 

html代码如下：

<div id="box"></div>

 

css代码：

#box {
　　display: block;
　　width: 200px;
　　height: 200px;
　　border: 1px solid black;
　　background-image: url("background/boats.png"); /* 此处使用url */
}

 

效果如下：

注意点：

  1. background-image可以同时插入多张图片，使用 “,”（逗号）分开，然后使用background-position来决定各个图片在元素中的位置
  2. 使用background-color时最后后面写上background-color,防止图片意外没有加载，使用background-color作为fallback

　　

1 #box {
　　background-image: url("1.jpg"), url("2.jpg"), url("3.jpg");
　　background-position: top left, center center, bottom 10px right 10px; /* 后面介绍 */
　　background-repeat: no-repeat;
　　background-color: blue; /* as fallback */
}

 

 3.background-position

　　可以使用的值有：

  1. 使用关键字<keywords>: top, right, bottom, left, center
  2. 使用百分比<percentage>,如30%,50%
  3. 使用<values>,如4em 30px...

 　  注意点：

    • 初始值 0% 0%，即元素的top left位置
    • 只有一个值时，如background-position： top; 另一个值默认为 center（或 50%），即　background-position：center top；
    • 混合使用关键字，百分比，数值时应当先写水平方向的值，然后写垂直方向的值 
      #box{
      　　background-position: right 10px; /* 表示在右边（水平方向），离元素上边界10px(垂直方向) */
      　　
      　　background-position: 10px right;/* 错误写法 被忽略此属性 */

      }

       

       

    • 当使用keywords表示时，书写比较自由 
      #box {
      　　background-position: top left; /* 可以不用考虑先写水平还是垂直方向的值 */
      　　background-position： top 30px right 30%; /* 甚至可以使用多个值表示 但不能不能使用center作参考 */
}

       

    •  

      这个值是相对于background-origin设置的区域　　　

4. background-origin

这个属性是规定背景图片的初始位置，共有3个值

  • border-box
  • padding-box (默认值)
  • content-box

 注意点，与background-clip区别

 

5.background-clip

 这个属性规定图片可绘制区域，也有3个值

  • border-box(默认值)
  • padding-box
  • content-box
#box {

　　display: block;
　　width: 400px;
　　height: 400px;
　　padding: 50px;
　　background-image: url(background/boats.png);
　　background-repeat: no-repeat;
　　background-origin: padding-box;
　　-webkit-background-clip: content-box; /* clip区域比图片起始位置origin小的情况 */
　　-moz-background-clip: content-box;
　　background-clip: content-box;
　　background-color: yellow;

   border: 1px solid black;

}

　　

可以看到图片只有部分显示出来，因为可绘制区域为content-box(background-clip)，而图片要出现的起始位置要在padding-box(background-origin)

 

 6.background-repeat

这个值一看就通俗易懂，是规定是否复制的，有以下几个值：

  • repeat      x,y轴都复制
  • repeat-x
  • repeat-y
  • space       这个值表示在给定轴（axis）上一个图片能够复制多少次，自动给一个常规的间距，x,y方向的间距可以不一样，可以改写background-position属性
  • round       这个值表示复制背景图片时，自动对图片进行缩小或放大,  这个值不能改写background-position属性

    示例：

    #box {
        display: block;
        width: 400px;
        height: 400px;
        padding: 50px;
        background-image: url(background/boats.png);
        background-repeat: space; /* round */
        background-color: yellow;
        border: 1px solid black;

    }

 

　　1.space

2.round

 

7.background-size

这个属性比较有意思，也比较重要

定义：
<background-size>: [<length> | <percentage> | auto]{1,2} | cover | contain

 

 注意点：

  1. 初始值(即默认值)为 auto
  2. 百分比<percentage>值的大小是针对background-origin区域，而不是background-clip区域 
    解释一下这条：
    比如background-origin：padding-box, background-clip: border-box;
    background-size: 25% 50%;
    表示：
      图片宽是元素padding-box的宽度值的25%， 高度是padding-box的50%

     

  3. 当只写一个auto值时，表示水平和垂直方向都是auto
  4. auto和<length>混合写的时候，如 background-size: auto 30px; 
    假设图片固有属性宽高为 200px * 100px (宽高比为2：1)
    有以下几种情况
    　　1.auto值计算出为 30px*2 = 60px
    　　2.auto值计算失败 则auto自动变为图片默认的宽度值： 200px
    　　3.第1，2步都失败，auto = 100%,这种情况矢量图出现的比较多，如SVG,<Gradient>图片

     

  5. cover      就是覆盖填充整个绘制区域 
    #box {

    　　display: block;
    　　width: 400px;
    　　height: 400px;
    　　background-image: url(background/boats.png);

    　　background-size: cover;

    　　background-color: yellow;
    　　border: 1px solid black;

    }

     

     

     

  6. contain   通过自动缩小或放大把整个图片能够完整的包含进去 
    #box {

    　　display: block;
    　　width: 40px;
    　　height: 40px;
    　　background-image: url(background/boats.png);
    　　background-repeat: no-repeat;
    　　background-size: contain;

    　　background-color: yellow;
    　　border: 1px solid black;

    }

     

    

    

     
    

    7. 



8.background-attachment


 这个值比较简单，就是将图片在滚动条存在的时候，是固定不动，还是跟一起滚动，两个属性值：


    

  • scroll (默认值)
    • 

  • fixed
    • 



　　


background综合属性


注意点：


    

  1. 所有的background子属性都不继承
    2. 

  2. 书写综合属性时，background-position要写在background-size前面，并用“/”隔开

    

    #box {
    　　background: url(1.jpg) repeat-y top left / 50% 50% fixed padding-box border-box yellow;
    }

    可以写为 
    #box {
    　　background-image: url(1.jpg);
    　　background-repeat: repeat-y;
    　　background-position: top left;
    　　background-size: 50% 50%;
    　　background-attachment: fixed;
    　　background-origin: padding-box;
    　　background-clip: border-box;
    　　background-color: yellow;
    }
    

    

     
    

    3. 

  3. background-origin属性要写在background-clip属性前面,如2
    4. 



 最后发张图，下一次一起学习一下linear-gradient和radial-gradient


 


 


 


 


 


 


 


 


 


 


 


 


---恢复内容结束---






            

            
posted @ 
2016-07-25 12:48 
James_Sawyer 
阅读(341) 
评论(0) 
编辑 
收藏 
举报