如果需要使用背景图片时，需要给这个元素设置宽高

  • background-color: yellow; 背景颜色
  • background-image: url(1.jpg); 背景图片
  • background-size:100% 100%; 设置背景图片的大小
  • background-repeat: no-repeat; 设置背景图片是否平铺
    • 默认值 repeat 平铺
    • no-repeart 不平铺
  • background-position: 70px 50px; 改变背景图片的位置
    • 第一个值代表的是x轴，水平方向的值
    • 第二个值代表的是y轴，垂直方向的值
    • 单位：px(像素)、英文单词(center\left\bottom..)
    • 让背景图片在盒子的水平垂直方向(x\y轴的中心点)
      • background-position:center center;

综合写法

  • background: yellow url(icon1.png) no-repeat 40px 50px;
  • background-size: 50%;

    如果想要设置背景图片的大小，需要另起一行设置

精灵图

在做项目的时候，有时候咱们为了优化，减少http请求，会把多张图片合并到一张图片上面，这种图就是“精灵图”，也称“雪碧图”。(只针对小图)
精灵图的原理：通过改变background-position。再记住一点，在写精灵图的时候，background-position的x轴，y轴的值一定的负的。

渐变

渐变可以分为两种：

  • 线性渐变（Linear Gradients）
  • 径向渐变（Radial Gradients）
    1、线性渐变 默认是从上到下
  1. .box{
  2.   background:linear-gradient(red,green);
  3.   background:-webkit-linear-gradient(red,green);
  4. }

2、从一个方向到另一个方向（left 、right 、bottom、top）

下面的例子就是从左到右

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green);

3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角

background:linear-gradient(to left top,red,green);
background:-webkit-linear-gradient(to left top,red,green);

4、还可以是角度

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);

径向渐变：默认的形状是椭圆，至少得有两个颜色值。
形状：ellipse 椭圆（默认），circle（圆）

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);

    }