背景属性

背景属性

<style>
      /* 背景图片 和img的区别
      背景图片 墙纸
      img  墙上挂的钟表
      */
      .main {
        width: 800px;
        height: 800px;
        /* 背景颜色   transparent透明
        颜色的表示方式：
          第一种： red  yellow blue  green...
          第二种:十六进制  前2位代表红色，中间两位代表绿色，后两位蓝色 ;  取值范围 0-9，a-f
                #111223   #00ff00  简写 #0f0  
                #f3f3f3，#ff33f3不能简写 
          第三种：rgb(200,212,0)   每一个的取值是0~255
               rgba(200,234,0,0.5)   a透明  0-1
​
        */
        
        /* 背景图片 */
        background-image: url(./img/logo.png);
        /* 背景平铺
        repeat  水平和垂直方向都平铺
        repeat-x  水平方向都平铺
        repeat-y 垂直方向都平铺
        no-repeat  水平和垂直方向都不平铺
        */
        background-repeat: no-repeat;
​
        /* 背景位置
        方位名词：最多表示9个位置  水平方向 left center right  垂直方向 top center bottom
        数字+px  ： 0 0 左上角  x y
        注意：方位名词可以和坐标轴混用，第一个表示水平  第二个表示垂直
        */
        background-position: 10px center;
      }
    </style>

复合写法

 .main {
        width: 800px;
        height: 800px;
​
        /* 复合写法
        background：color image repeat position
         */
​
        /* background: red url(./img/logo.png) no-repeat left center; */
​
        background: yellow url(./img/logo.png) no-repeat;
        background-position: left center;
      }