5、background-size 背景尺寸¶

属性值	说明	实例
x y	x y 数值，分别表示背景图片宽高大小	background-size: 100px 200px;
x% y%	百分比是相对于盒子的宽高而言，	background-size: 50% 20%;
x auto	auto 是相对于第一个值宽来自动缩放第一个值可以是数值，也可以是百分形式	background-size: 100px auto;
contain	背景图片等比缩放到正好全部容纳到盒子里	background-size: contain;
cover	背景图片等比缩放到正好撑满整个盒子，所以部分有可能会被裁剪掉	background-size: cover;

background-size 属性的默认值为 auto ;

5.1、数值表示法¶

<style>
div {
  width: 200px;
  height: 200px;
  border: 2px solid red;
  background-image: url(images/bg48.png);
  background-repeat: no-repeat;
}
.box1 {
  background-size: 100px 200px;
}
.box2 {
  background-size: 50% 20%;
}
.box3 {
  background-size: 50% auto;
}
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

![[Pasted image 20260226153528.png]]

5.2、contain 和 cover 表示法¶

<style>
    div{
        width:200px;
        height:200px;
        border:2px solid red;
        background-image: url(images/yw.png);
        background-repeat: no-repeat;
        float: left;
        margin-right: 10px;
    }

    .box2{
        background-size: contain;
    }
    .box3{
        background-size: cover;
    }

</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

![[Pasted image 20260226154258.png]]

三、线性渐变¶

TIP

CSS 属性 background-image 可以用 linear-gradient() 函数，用于创建线性渐变背景

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向（或角度）。未设置角度，则默认认为 180deg（从上到下）设置了角度，则 0deg 为竖直向上，然后顺时针旋转指定关键词 to right、to top、to bottom、to bottom right 等
color-stop1, color-stop2, ...	用于指定渐变的起止颜色（color-stop 色标）。

1、默认渐变方向¶

TIP

未指定渐变方向时，则默认从上向下渐变（相当于设置了角度值 180deg）

.box1 {
  width: 200px;
  height: 200px;
  /* 
    linear-gradient 线性渐变
    to right 表示渐变方向，向右
    gold 表示开始颜色
    red 表示结束颜色
  */
  background-image: linear-gradient(gold, red);
}

![[Pasted image 20260226154413.png]]

2、关键字指定渐变的方向¶

关键词	说明
top	从下到上渐变
bottom	从上到下渐变
left	从右到左渐变
right	从左到右渐变

.box1 {
  width: 200px;
  height: 200px;
  /* 
    linear-gradient 线性渐变
    to right 表示渐变方向，向右
    gold 表示开始颜色
    red 表示结束颜色
  */
  background-image: linear-gradient(to right, gold, red);
}

![[Pasted image 20260226154506.png]]

3、用度数指定渐变方向¶

TIP

渲染的效果是，颜色从下往上渐变，然后旋转一定的角度。

角度为正值，则顺时针旋转
角度为负值，则逆时针旋转

.box2 {
  width: 200px;
  height: 200px;
  /* 45deg 表示倾斜方向，deg表示度数 */
  background-image: linear-gradient(45deg, green, red);
}

![[Pasted image 20260226154543.png]]

4、设置颜色（色标）的起始位置¶

TIP

在颜色的后面紧跟着一个空格和值（数值或百分值都可以）来指定颜色的起始位置

<style>
.box3 {
  width: 600px;
  height: 200px;
  /* 
    blue 代表蓝色
    0% 表示蓝色出现的位置
    yellow 代表黄色
    50% 表示黄色出现的位置
    red 代表红色
    100% 表示红色出现的位置
  */
  background-image: linear-gradient(to right, blue 0%, yellow 50%, red 100%);
}
</style>
<body>
  <div class="box3"></div>
</body>

![[Pasted image 20260226154636.png]]

5、注意事项¶

未设置 0% 的起始色与 100%的终止色

默认情况下，如果未设置 0% 的起始色，则起始色为声明的第一个颜色。不管最后一种颜色出现位置有无设置，或设置值为多少，最后一个颜色都将持续到 100%的位置。

<style>
  .box3,
  .box4 {
    width: 600px;
    height: 200px;
    /* 
            blue 代表蓝色
            20% 表示蓝色出现的位置
            yellow 代表黄色
            50% 表示黄色出现的位置
            red 代表红色
            80% 表示红色出现的位置 
        */
    background-image: linear-gradient(to right, blue 20%, yellow 50%, red 80%);
  }
</style>
<body>
  <div class="box3"></div>
</body>

![[Pasted image 20260226154809.png]]

6、自定义转换中点¶

**默认转换中点

默认情况下，从一个颜色的平滑的过渡到另一个颜色，两颜色之间的中点是两个颜色转换的中点（过渡中点）

<style>
  .box3 {
    width: 600px;
    height: 200px;
    /* 
            blue 代表蓝色
            0% 表示蓝色出现的位置
            yellow 代表黄色
            50% 表示黄色出现的位置
            red 代表红色
            100% 表示红色出现的位置 
        */
    background-image: linear-gradient(to right, blue 0%, yellow 50%, red 100%);
  }
</style>
<body>
  <div class="box3"></div>
</body>

![[Pasted image 20260226154852.png]]

**自定义转换中点

你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记颜色的 %分值，以指示颜色的中转位置

<style>
  .box3 {
    width: 600px;
    height: 200px;
    /* 
            blue 代表蓝色
            0% 表示蓝色出现的位置
            40% 表示蓝色与黄色的颜色转换中心
            yellow 代表黄色
            50% 表示黄色出现的位置
            red 代表红色
            100% 表示红色出现的位置 
        */
    background-image: linear-gradient(
      to right,
      blue 0%,
      40%,
      yellow 50%,
      red 100%
    );
  }
  .box4 {
    width: 240px;
    height: 20px;
    background-color: pink;
  }
</style>
<body>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

![[Pasted image 20260226154926.png]]

7、设置多位置色标¶

**TIP

可以在一个颜色后面出现多个色标值。

background-image:
linear-gradient(to right, blue 0% 40% , yellow 50% 80%, red 100%);
}
/* 以上 css 等同于下面 */
background-image:
linear-gradient(to right, blue 0%, blue 40%, yellow 50% , yellow 80%,red 100%);

![[Pasted image 20260226155024.png]] 案例：色标渐变卡

这个示例使用了多位置的色标，两个相邻的颜色有相同的色标值，形成了条纹效果。

![[Pasted image 20260226155047.png]]

<style>
  .color-guid {
    height: 100px;
    background: linear-gradient(
      to right,
      red 20%,
      orange 20% 40%,
      yellow 40% 60%,
      green 60% 80%,
      blue 80%
    );
  }
</style>
<div class="color-guid"></div>

8、区分多位置色标与转换中点

<style>
  .box {
    width: 800px;
    height: 100px;
  }
  .linear1 {
    background: linear-gradient(
      to right,
      /* 0 到 20% 之间都是 红色 */ red 20%,
      /* 70% 为 红色到蓝色渐变的中心位置 */ 70%,
      blue 100%
    );
  }
  .linear2 {
    background: linear-gradient(
      to right,
      /* 0 到 70% 之间都是 红色 */ red 20% 70%,
      /* 70% 和 100% 之间为 红到蓝的渐变*/ blue 100%
    );
  }
</style>

<div class="box linear1"></div>
<div class="box linear2"></div>

![[Pasted image 20260226155137.png]] **案例：色标渐变卡 ![[Pasted image 20260226155202.png]]

<style>
  .color-guid {
    height: 100px;
    background: linear-gradient(
      to right,
      red 20%,
      orange 20%,
      40%,
      yellow 40%,
      60%,
      green 60%,
      80%,
      blue 80%
    );
  }
</style>
<div class="color-guid"></div>

9、浏览器私有前缀¶

TIP

不同浏览器有不同的私有前缀，用来对实验性质的 CSS 属性加以标识
阅读 MDN 官方文档，了解浏览器引擎前缀

浏览器	前缀
Chrome、Edeg、Safari、Opera	-webkit-
Firefox 火狐	-moz-
旧版 (IE、Edge)	-ms-
旧版 Opera 欧朋	-o-

以下写法是为了保证兼容低版本的浏览器

background-image: -webkit-linear-gradient(to right, gold, red);
background-image: -moz-linear-gradient(to right, gold, red);
background-image: -ms-linear-gradient(to right, gold, red);
background-image: -o-linear-gradient(to right, gold, red);
background-image: linear-gradient(to right, gold, red);

四、径向渐变¶

TIP

CSS 属性 background-image 可以用 radial-gradient() 函数创建径向渐变背景图
径向渐变是指由中心向四周的渐变
径向渐变 (Radial gradients) 是由渐变形状，渐变大小、_中心点、_两个或多个色值结束点 (color stops) **定义而成。

语法：

background-image: radial-gradient(
  /*shape 渐变形状 size 渐变半径大小 at position 渐变中心点*/ shape size at position,
  /* 渐变起始色 */ start-color,
  /* 中间还可以定义多个颜色 */ ...,
  /* 渐变结束色 */ end-color
);

值	描述
shape	确定圆的类型 ellipse (默认)：指定椭圆形的径向渐变 circle：指定圆形的径向渐变
size	定义渐变形状的大小，可能值： farthest-corner (默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边可定义一个长度值，确定渐变圆形的半径大小可以定义两个长度值，确定渐变的椭圆大小，第一值为水平半径，第二值为垂直半径
position	定义渐变的中心位置可能值：center (默认)：设置中间为径向渐变圆心的纵坐标值。top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., end-color	用于指定渐变的起止颜色

1、简单的径向渐变¶

TIP

默认起始点为元素中心点，默认形状为椭圆，默认尺寸大小为 farthest-corner，颜色节点均匀分布

<style>
.box {
  width: 600px;
  height: 200px;
}
.box1 {
  /* 
    red代表红色
    yellow代表黄色
    blue代表蓝色
    未定义位置时，默认以元素中心位置为起点向四周渐变
    未定义渐变类型，默认是以椭圆形的径向渐变
  */
  background-image: radial-gradient(red, yellow, blue);
}
</style>
<body>
  <div class="box box1"></div>
</body>

![[Pasted image 20260226155427.png]]

2、设置色标（颜色）的起始位置¶

**TIP

在颜色的后面紧跟着一个空格和色标值（数值或百分值都可以）来指定颜色的起始位置

默认情况下，如果未设置 0% 的起始色，则起始色为声明的第一个颜色。在径向渐变中，不管最后一种颜色出现位置有无设置，或设置值为多少，最后一个颜色都将持续到把整个容器填满。

<style>
  .box {
    width: 300px;
    height: 300px;
  }
  .box1 {
    /* 
        red代表红色
        10%代表红色起始点
        yellow代表黄色
        80% 代表黄色起始点
        blue代表蓝色 
        */
    background-image: radial-gradient(red 10%, yellow 80%, blue);
  }
</style>

<body>
  <div class="box box1"></div>
</body>

![[Pasted image 20260226155606.png]]

3、自定义转换中点（过渡中点）¶

**TIP

在两个过渡色中间填写非颜色的值（数值或百分值），指定两个过渡色转换中心位置

<style>
  .box2 {
    /* 
        red代表红色
        10%代表红色起始点
        第二个10%代表红色与黄色的转换中点
        yellow代表黄色
        80% 代表黄色起始点
        blue代表蓝色 
        */
    background-image: radial-gradient(red 10%, 10%, yellow 80%, blue);
  }
</style>
<div class="box box2"></div>

![[Pasted image 20260226155651.png]]

4、设置多位置色标(颜色)¶

**TIP

可以在一个颜色后面出现多个色标值。

两个相邻的颜色有相同的色标值，就会形成条纹效果。

<style>
  .box {
    width: 300px;
    height: 300px;
  }
  .color-guid {
    background-image: radial-gradient(
      /* 0% 到 50% 都为红色*/ red 50%,
      /* 50% 到 60% 都为黄色 */ yellow 50% 60%,
      /* 60% 到 70% 都为绿色*/ green 60% 70% /* 70% 到 100% 都为绿色*/
    );
  }
</style>
<body>
  <div class="box color-guid"></div>
</body>

![[Pasted image 20260226155732.png]] 案例：环形圆盘

这个示例使用了多位置的色标，两个相邻的颜色有相同的色标值，形成了条纹效果。

<style>
  .box {
    width: 300px;
    height: 300px;
  }
  .color-guid {
    background-image: radial-gradient(
      red 15%,
      orange 15% 30%,
      yellow 30% 45%,
      green 45% 60%,
      transparent 60%
    );
  }
</style>
<body>
  <div class="box color-guid"></div>
</body>

![[Pasted image 20260226155800.png]]

5、设置径向渐变的形状 shape¶

**TIP

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

<style>
  .box {
    width: 300px;
    height: 200px;
    border: 2px solid #fff;
    float: left;
  }
  .box1 {
    /* 
        circle 指定椭圆形的径向渐变
        red 代表红色
        yellow代表黄色
        blue代表蓝色 
        */
    background-image: radial-gradient(circle, red, yellow, blue);
  }
  .box2 {
    background-image: radial-gradient(red, yellow, blue);
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

![[Pasted image 20260226155839.png]]

6、指定径向渐变中心位置 position¶

**TIP

设置渐变中心位置与设置背景图位置相似，属性值可以采用固定值、百分比值、关键词三种写法。

百分比值相对于背景图 background-size 大小而言。不过如果渐变图形是圆时，百分比不会生效；只有渐变是椭圆时才会生效，并且 x y 半径都要指定。

<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 0px 2px;
    float: left;
    color: #fff;
  }
  .box1 {
    /* 
            at 100px 100px代表径向渐变的中心点
            red代表红色
            yellow 代表黄色
            blue代表蓝色
        */
    background-image: radial-gradient(at 100px 100px, red, yellow, blue);
  }
</style>
<body>
  <div class="box box1"></div>
</body>

![[Pasted image 20260226155922.png]]

5、指定不同尺寸的大小 size¶

size 参数定义了渐变的大小。它可以是以下四个值：

值	描述
farthest-corner	(默认)：渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
closest-side	(圆形) 渐变的边缘形状与容器距离渐变中心点最近的一边相切 (椭圆) 距离渐变中心点最近的垂直和水平边相切。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交(水平与垂直边相交)。
farthest-side	与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切 (或最远的垂直和水平边)。
### 5.1、椭圆径向渐变

<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 0px 2px;
    float: left;
    color: #fff;
  }
  .box1 {
    /* 
        closest-side 最近的边
        50px 20px为径向椭圆的中心点
        red代表红色
        yellow 代表黄色
        blue代表蓝色
     */
    background-image: radial-gradient(
      closest-side at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box2 {
    background-image: radial-gradient(
      farthest-side at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box3 {
    background-image: radial-gradient(
      closest-corner at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box4 {
    background-image: radial-gradient(
      farthest-corner at 50px 20px,
      red,
      yellow,
      blue
    );
  }
</style>
<body>
  <div class="box box1">closest-side</div>
  <div class="box box2">farthest-side</div>
  <div class="box box3">closest-corner</div>
  <div class="box box4">farthest-corner</div>
</body>

![[Pasted image 20260226160044.png]]

5.2、圆形径向渐变¶

<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 0px 2px;
    float: left;
    color: #fff;
  }
  .box1 {
    /* 
        circle 表示圆形的径向渐变
        closest-side 最近的边
        50px 20px为径向椭圆的中心点
        red代表红色
        yellow 代表黄色
        blue代表蓝色
     */
    background-image: radial-gradient(
      circle closest-side at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box2 {
    background-image: radial-gradient(
      circle farthest-side at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box3 {
    background-image: radial-gradient(
      circle closest-corner at 50px 20px,
      red,
      yellow,
      blue
    );
  }
  .box4 {
    background-image: radial-gradient(
      circle farthest-corner at 50px 20px,
      red,
      yellow,
      blue
    );
  }
</style>
<body>
  <div class="box box1">closest-side</div>
  <div class="box box2">farthest-side</div>
  <div class="box box3">closest-corner</div>
  <div class="box box4">farthest-corner</div>
</body>

![[Pasted image 20260226160123.png]]

5.3、指定渐变的半径¶

<style>
  .box {
    width: 300px;
    height: 300px;
    float: left;
  }
  .circle {
    background-image: radial-gradient(
      circle 50px,
      red,
      yellow,
      blue 100%,
      transparent 100%
    );
  }
  .ellipse {
    background-image: radial-gradient(
      ellipse 100px 50px,
      red,
      yellow,
      blue 100%,
      transparent 100%
    );
  }
</style>
<body>
  <div class="box circle"></div>
  <div class="box ellipse"></div>
</body>

![[Pasted image 20260226160157.png]]

6、实战案例：绘制彩虹¶

<style>
  .rainbow {
    width: 600px;
    height: 300px;
    border: 1px solid red;
    /*  径向渐变
      圆形渐变  最远边相切 圆心在底部中心 
     */
    background-image: radial-gradient(
      circle farthest-side at bottom center,
      white 40%,
      pink 50%,
      pink 55%,
      red 60%,
      red 65%,
      orange 70%,
      orange 75%,
      skyblue 80%,
      skyblue 85%,
      yellow 90%,
      yellow 95%,
      white 95%
    );
  }
</style>

<body>
  <div class="rainbow"></div>
</body>

![[Pasted image 20260226160317.png]]

5、background-size 背景尺寸¶

5.1、数值表示法¶

5.2、contain 和 cover 表示法¶

三、线性渐变¶

1、默认渐变方向¶

2、关键字指定渐变的方向¶

3、用度数指定渐变方向¶

4、设置颜色（色标）的起始位置¶

5、注意事项¶

6、自定义转换中点¶

7、设置多位置色标¶

9、浏览器私有前缀¶

四、径向渐变¶

1、简单的径向渐变¶

2、设置色标（颜色）的起始位置¶

3、自定义转换中点（过渡中点）¶

4、设置多位置色标(颜色)¶

5、设置径向渐变的形状 shape¶

6、指定径向渐变中心位置 position¶

5、指定不同尺寸的大小 size¶

5.2、圆形径向渐变¶

5.3、指定渐变的半径¶

6、实战案例： 绘制彩虹¶

6、实战案例：绘制彩虹¶