【CSS3】CSS3背景相关属性大全

基本背景属性の使用

  
    
    背景属性
    
      div {
        border: 1px solid #000;
        height: 100px;
        width:  300px;
      }
    
  
  
    
    
      background-color:#92e900
    
    
    
      background-image:url(dog.jpg)
    
    
    
      background-image:url(dog.jpg)
      background-repeat:no-repeat
    
    
    
      background-image:url(dog.jpg)
      background-repeat:repeat-x
    
    
    
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:35% 80%
    
    
    
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:30px 8px
    
    
    
      background-image:url(dog.jpg)
      background-repeat:no-repeat
      background-position:center bottom
    
  

背景图片的固定

  
    
    背景固定
  
  
    
      
        for (var i = 0; i 
    背景属性
    
      div {
        border:  10px dotted #444;
        padding: 12px;
        height:  30px;
        width:   300px;
      }
    
  
  
    
    
      background-color:#ff6aa1
    
    
    
      background-image:url(dog.jpg)
    
    
    
      background-image:url(dog.jpg)
      background-clip:no-clip
    
    
    
      background-image:url(dog.jpg)
      background-clip:padding-box
    
    
    
      background-image:url(dog.jpg)
      background-clip:content-box
    
  

CSS3新增的background-origin属性の使用

  
    
    背景属性
    
      div {
        border: 12px dotted #444;
        height: 120px;
        width:  300px;
      }
    
  
  
    
    
      background-color:#ff6a51
    
    
    
      background-image:url(dog.jpg)
      background-origin:content-box
      background-repeat:no-repeat
    
    
    
      background-image:url(dog.jpg)
      background-origin:padding-box
      background-repeat:no-repeat
    
    
    
      background-image:url(dog.jpg)
      background-origin:border-box
      background-repeat:no-repeat
    
  

CSS3新增的background-size属性の使用

  
    
    背景属性
    
      div {
        border: 12px dotted #444;
        height: 70px;
        width:  300px;
      }
    
  
  
    
    
      background-image:url(dog.jpg)
    
    
    
      background-image:url(dog.jpg)
      background-size:100% 80%
    
    
    
      background-image:url(dog.jpg)
      background-size:30% auto
    
    
    
      background-image:url(dog.jpg)
      background-size:auto 50%
    
    
    
      background-image:url(dog.jpg)
      background-size:60px 30px
    
    
    
      background-image:url(dog.jpg)
      background-size:40px auto
    
    
    
      background-image:url(dog.jpg)
      background-size:auto 20px
    
  

CSS3为background-repeat新增的space和roundの使用

  
    
    背景属性
    
      div {
        height: 150px;
        width:  300px;
        background-image:url(dog.jpg);
      }
    
  
  
    换行警告
    
    
      background-image:url(dog.jpg)
    
    换行警告
    
    
      background-image:url(dog.jpg)
      background-repeat:round
    
    换行警告
    
    
      background-image:url(dog.jpg)
      background-repeat:space
    
  

CSS3新增的多背景图片の使用

  
    
    背景属性
    
      div {
        border:1px solid #000;
        height:200px;
        width:500px;
        background-image: url(dog.jpg), url(dog2.jpg), url(dog3.jpg);
        background-repeat: repeat-y, repeat-x, repeat;
        background-position: center top, left bottom, left top;
      }
    
  
  
    
  

图片使用——柴犬 dog.jpg

dog2.jpg

dog3.jpg