5.背景：background

(1) background-color：背景颜色

(2) background-image：url(' ') 把图像设置为背景

(3) background-repeat：设置背景图像如何重复
      · no-repeat：不重复
      · repeat-x：   沿着x方向重复

(4) background-position：背景图像的起始位置
      · 方向：    left,right,center,top,bottom可以两两配合使用
      · 百分比：左上角是0% 0%，右下角100% 100%
      · 像素：   左上角是0 0

(5) background-size：背景图片的大小
      · cover：   不完全显示，最短的边完全显示
      · contain：最长的边完全显示
      · 100px 140px（如果只有一个值，表示宽度）

(6) background-attachment：背景图像是固定还是随页面动
      · scroll：默认
      · fixed：固定

(7) 背景简写：background:color image repeat position/size attachment
注意：如果要写size,必须要有position

<p class="img">长风破浪会有时</p>
//样式
.img {
  background-color: yellow;
  background-image: url("../../assets/imgs/img3.jpg");
  background-repeat: no-repeat;
  background-position: 50px 20px;
  background-size: 100px 140px;
  background-attachment: scroll;
}
//等同于
.img {
  background: yellow url("../../assets/imgs/img3.jpg") no-repeat 50px 20px/100px 140px scroll;
}

 

 

(8) background-clip：规定背景的绘制区域
      · border-box：   背景被裁剪到边框
      · padding-box：背景被裁剪到内边距
      · content-box： 背景被裁剪到内容框

　　

<p style="background-clip: border-box">长风破浪会有时</p>
<p style="background-clip: padding-box">长风破浪会有时</p>
<p style="background-clip: content-box">长风破浪会有时</p>
//p的公共样式
p{
    background-color: yellow;
    border:5px solid rgba(255,0,0,0.1);
    margin:10px;
    padding:10px;
}

 

 

(9) background-origin：规定背景的定位区域
      · border-box：   背景相对于边框来定位
      · padding-box：背景相对于内边距来定位
      · content-box： 背景相对于内容框来定位

　　

<p style="background-origin: border-box">长风破浪会有时</p>
<p style="background-origin: padding-box">长风破浪会有时</p>
<p style="background-origin: content-box">长风破浪会有时</p>
//p的样式
p{
    background-color: yellow;
    border: 5px solid rgba(255, 0, 0, 0.1);
    margin: 10px;
    padding: 10px;
    background-image: url("../../assets/imgs/img3.jpg");
    background-position: 0 0;
    background-size: 100px 140px;
    background-repeat: no-repeat;
}

 

 

(10) 线性渐变背景：linear-gradient(开始位置 角度，起始颜色，终止颜色 位置)
      · 开始位置：属性值可以是百分比、长度、left/left/right/top/bottom组合使用
      · 角度：渐变终止方向的角度，当开始位置是数值或百分比可用
      · 重复的线性渐变：repeating-linear-gradient()

　　

//方式一：发散颜色
<p style="background: linear-gradient(red,yellow,green)"></p>
//方式二：发散方向
<p style="background: linear-gradient(to right bottom,red,yellow,green)"></p>
//方式三：发散角度（更精确）
<p style="background: linear-gradient(60deg,red,yellow,green)"></p>
//方式四：每种颜色所占的百分比
<p style="background: linear-gradient(red 20%,yellow 50%,green 100%)"></p>
//方式五：重复渐变
<p style="background: repeating-linear-gradient(red 10px,yellow 20px,green 30px)"></p>

 

 

(11) 径向渐变背景：radial-gradient(开始位置 角度，起始颜色，终止颜色)
      · ellipse：椭圆，circle：圆形
      · 发散方向：left/right/top/bottom/center可组合使用
      · 大小（半径）：可用像素或关键字
                   closest-side:圆心到最近的边。 farthest-side:圆心到最远的边
                   closest-corner:圆心到最近的角。 farthest-corner:圆心到最远的角
      · 重复的径向渐变：repeating-radial-gradient()

　　

//方式一：发散颜色
<p style="background: radial-gradient(red,yellow,green)"></p>
//方式二：发散形状（默认椭圆）
<p style="background: radial-gradient(circle,red,yellow,green)"></p>
//方式三：发散方向
<p style="background: radial-gradient(circle at top,red,yellow,green)"></p>
//方式四：发散半径（像素）
<p style="background: radial-gradient(circle 40px,red,yellow,green)"></p>
//方式五：发散半径（关键字）
<p style="background: radial-gradient(circle closest-side,red,yellow,green)"></p>
//方式六：重复渐变
<p style="background: repeating-radial-gradient(circle closest-side,red,yellow,green)"></p>

 

 

vue小实例：点击随机显示扑克牌

 步骤一：template

<div class="pk" @click="changePk" :style="beijing"></div>

步骤二：data

beijing: {
    backgroundPositionX: "",
    backgroundPositionY: "",
}

步骤三：methods

changePk() {
      // 获取0~10之间的随机数
      let randomX = Math.floor(Math.random() * 11);
      // 获取0~4之间的随机数
      let randomY = Math.floor(Math.random() * 5);
      // 背景图x轴的位置，相当于background-position-x
      this.beijing.backgroundPositionX = randomX * 10 + "%";
      // 背景图y轴的位置，相当于background-position-y
      this.beijing.backgroundPositionY = randomY * 25 + "%";
},

步骤四：style

.pk {
  width: 200px;
  height: 300px;
  background: blue url("../../assets/imgs/pk.png") no-repeat 20% 25%/1100% 500%;
}