CSS_背景

背景

属性名: background

• 详细属性:

  • background-color: 背景颜色

  • background-image: 背景图片
    url('图片地址')

  • background-repeat: 背景重复
    no-repeat 取消重复

  • background-position: 背景定位
    X Y x和y 代表水平轴和垂直轴

    • 正数:
      • 水平->右
      • 垂直->下
      • center -> 水平居中
    • 负数:
      • 水平->左
      • 垂直->上
      • center -> 垂直居中

  • background-size: 背景大小
    ​ px, %

• 简写:
  background: [ color | image | repeat | position/size ];

<style>
        .box{
            width: 200px;
            height: 200px;

            background-color: #3750E4;
            background-image: url('./img/1.jpg');
            background-position: -150px -170px;
        }
        .icon{
            width: 37px;
            height: 38px;
            background-image: url('./img/2.png');
            background-position: 0px -37px;
        }
        .icon:hover{
            background-position: -38px -37px;
        }
        .big{
            width: 100%;
            height: 2000px;
         /* background-color: pink;
            background-image: url('./img/1.jpg');
            background-repeat: no-repeat;
            background-position: 500px 500px;
            background-position: center center;
            background-size: 200px;
            background-size: 100%; */
            background: center center/800px pink   no-repeat  url('./img/1.jpg');
        }
  </style>

    <div class="box"> </div>
    <div class="icon"></div>
    <div class="big"></div>