background

image.jpg

  
  
  
  
  



  

    

      
background-color: red;
      

    
    

      
background-color: #03a9f4;
      

    
    

      
background-color: rgba(12, 7, 77, 0.6);
      

    
    

      
background-color: hsla(180, 50%, 50%, 1);
      

    
  
  

    

      
background-image: url(/image.bmp);
      

    
    

      
background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      

    
  
  

    

      
background-size: 120px 120px;
      

    
    

      
background-size: 380px 380px;
      

    
    

      
background-size: 100% 100%;
      

    
  
  

    

      
background-repeat: no-repeat;
      

    
    

      
background-repeat: repeat-x;
      

    
    

      
background-repeat: repeat-y;
      

    
  
  

    

      
background-origin: border-box;
      
一些文字
    
    

      
background-origin: padding-box;
      
一些文字
    
    

      
background-origin: content-box;
      
一些文字
    
  
  

    

      
background-clip: content-box;
      
一些文字
    
    

      
background-clip: content-box;
      
一些文字
    
    

      
background-clip: content-box;
      
一些文字
    
  
  

    

      
background-position: 0 0;
      

    
    

      
background-position: -30px -30px;
      

    
    

      
background-position: 10% 10%;
      

    
  
  

    

      
background-attachment: fixed;
      

    
    

      
background-attachment: fixed;
      

    
  
  

    

      
background-attachment: fixed;
      

    
    

      
background-attachment: scroll;
      

    
  
  

    

      
background:rgba(100, 100, 100, .5) url(/image.bmp) no-repeat 60px 50px scroll;
      
background: background-color, background-image, background-repeat, background-position, background-attachment 
      

    
  
  

.flex {
  display: flex;
  margin-bottom: 30px;
}

.flex > * {
  margin-right: 30px;
}

p {
  margin: 5px 0;
}

.box {
  width: 200px;
  height: 200px;
  color: whitesmoke;
  font-size: 20px;
  box-sizing: border-box;
  border: 10px dashed rgba(100, 100, 100, .5);
}

.background-color {
  background-color: red;
}

.background-color2 {
  background-color: #03a9f4;
}

.background-color3 {
  background-color: rgba(12, 7, 77, 0.6);
}

.background-color4 {
  background-color: hsla(180, 100%, 50%, 1);
}

.background-image {
  background-image: url(/image.bmp);
}

.background-image2 {
  background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
}

.background-size {
  background-size: 120px 120px;
}

.background-size2 {
  background-size: 380px 380px;
}

.background-size3 {
  background-size: 100% 100%;
}

.background-repeat {
  background-repeat: no-repeat;
}

.background-repeat2 {
  background-repeat: repeat-x;
}

.background-repeat3 {
  background-repeat: repeat-y;
}


.background-origin {
  padding: 25px;
  background-origin: border-box;
}

.background-origin2 {
  padding: 25px;
  background-origin: padding-box;
}

.background-origin3 {
  padding: 25px;
  background-origin: content-box;
}

.background-clip {
  padding: 25px;
  background-clip: border-box;
}

.background-clip2 {
  padding: 25px;
  background-clip: padding-box;
}

.background-clip3 {
  padding: 25px;
  background-clip: content-box;
}

.background-position {
  padding: 25px;
  background-position: 0 0;
}

.background-position2 {
  padding: 25px;
  background-position: -30px -30px;
}

.background-position3 {
  padding: 25px;
  background-position: 10% 10%;
}

.background-attachment {
  background-attachment: fixed;
}

.background-attachment2 {
  background-attachment: scroll;
}

.background {
  background:rgba(100, 100, 100, .5) url(/image.bmp) no-repeat 60px 50px scroll;
}