渐变背景

@Gradient Background

. 利用不同的颜色以图片的形式渲染背景

. 可以多次渲染；先出现的在上面，后出现的在后面

. 复合属性 - 可读性差

background:
  bg-color 
  bg-image 
  position/bg-size 
  bg-repeat 
  bg-origin 
  bg-clip 
  bg-attachment 
  initial|inherit;

. 独立属性 - 可读性好

线性渐变 Linear-gradient

. 线性渐变 Linear Gradients - 向下/向上/向左/向右/对角方向

. 创建一个线性渐变，至少定义两个色块

. 可以指定色块的大小/范围和方向；可以使用 deg 或关键字，如 left、right、top、bottom

. 方向：0deg是从下到上↑，顺时针方向增加；默认是180deg，从上到下↓

. 位置：不特别指明都是从0开始，到100%结束；这俩个位置的值可以省略

. 更多信息，请访问 MDN - linear-gradient

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

基本渐变

background-image: 
  linear-gradient(#f40, #ff0);
background-image: 
  linear-gradient(to bottom, #f40, #ff0);

background-image: 
  linear-gradient(0deg, #f40, #ff0);
background-image: 
  linear-gradient(to top, #f40, #ff0);

background-image: 
  linear-gradient(45deg, #f40, #ff0);
background-image: 
  linear-gradient(to top right, #f40, #ff0);

断点渐变

. 断点处使用相同的色块大小；使用0表示和前面色块的范围相同

. 利用角度实现切角的效果

// 切割色块 - 将其中一个色块设置为白色或透明
background-image: 
linear-gradient(90deg, #f40 50%, #fff 0);

¥99 ~~¥199~~

// 价格促销
background-image: 
linear-gradient(90deg, #f40 50%, #fff 0);

// 增加有色部分的占比
background-image: 
linear-gradient(45deg, #f40 95%, #fff 0);

// 斑马渐变；也可以使用多个背景或重复线性渐变实现
background-image: 
  linear-gradient(90deg, 
    #f40 20%, #fff 0, 
    #fff 40%, #f40 0, 
    #f40 60%, #fff 0, 
    #fff 80%, #f40 0);

// 2个背景图片叠加而成；一左一右放置；不重复
background-image: 
  linear-gradient(45deg, #f40 95%, #fff 0), 
  linear-gradient(135deg, #fff 5%, #f40 0);
background-size: 50%;
background-position: right, left;
background-repeat: no-repeat;

// 4个背景；宽高各为50%；分别放置4个角；不重复
background-image:
  linear-gradient(45deg, #f40 95%, #fff 0),
  linear-gradient(135deg, #fff 5%, #f40 0),
  linear-gradient(45deg, #fff 5%, #f40 0),
  linear-gradient(135deg, #f40 95%, #fff 0);
background-size: 50% 50%;
background-position: 
  right top, 
  left top, 
  left bottom, 
  right bottom;
background-repeat: no-repeat;

// 遮罩背景；利用透明的渐变背景和图片背景实现
background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.1)),
    url(../imgs/cover.jpg);
background-size: cover;

. 如果使用多个渐变，请使用复合属性 background；可以单独指定不重复

. 实际运用时，先画个草图，大概确定下背景图片的组成、大小和位置，再使用样式实现

. 除此外，还有重复线性渐变：repeating-linear-gradient()

[] 按钮设计 Button

[] 表格设计 Table

径向渐变 Radial-gradient

. 径向渐变 Radial Gradients - 由它们的中心和到容器边或角的大小决定

. 同线性渐变一样：创建一个径向渐变，至少定义两个色块；可以定义每个色块的渐变范围；可以指定大小；可以定义多重径向渐变等等

. 更多信息，请访问 MDN - radial-gradient

background-image: 
  radial-gradient([shape] [size] at position, start-color, ..., last-color);

参数说明：

. shape：椭圆eclipse[默认]，圆circle

. size：到容器的边或角的距离；closest-side、farthest-side、closest-corner、farthest-corner[默认]

. position：为中心；可以使用关键字指定位置；可以使用数字；可以百分比

基本渐变

// 默认渐变：从中心向外
background-image: 
  radial-gradient(#f40, #ff0);

// 圆形从左上向外渐变
background-image: 
  radial-gradient(circle at left top, #f40, #ff0);

// 圆形从左上向外断点渐变
background-image: 
  radial-gradient(circle at top left, #f40 50%, #ff0 0);

// 放置于右上角的50px的圆形
background-image: 
  radial-gradient(circle at top left, #f40 50%, #ff0 0);

// 弧度 - 单重渐变
background-image: 
  radial-gradient(at 0% 0%, transparent 71%, #f40 0);

// 弧度 - 多重渐变
//可以使用background-image或background
background: 
    radial-gradient(circle at -10% 10%, transparent 70%, rgba(255, 68, 0, 0.3) 0), 
    radial-gradient(circle at 5% 20%, transparent 70%, rgba(255, 68, 0, 0.6) 0), 
    radial-gradient(circle at 10% 10%, transparent 75%, rgb(255, 68, 0) 0);

// 指定图形大小
background: 
    radial-gradient(30px circle at 0 0, transparent 50%, #f40 0),
    radial-gradient(30px circle at 100% 0, transparent 50%, #f40 0) right top,
    radial-gradient(30px circle at 100% 100%, transparent 50%, #f40 0) right bottom, 
    radial-gradient(30px circle at 0% 100%, transparent 50%, #f40 0) left bottom;
background-repeat: no-repeat;
background-size: 50% 50%;

[] 利用断点渐变体会参数 size

调整背景的位置，再观察结果

// 观察到哪个边最近
background-image: 
  radial-gradient(circle closest-side, 
  #f40 50%, #089 0);

// 观察到哪个边最远
background-image: 
  radial-gradient(circle farthest-side, 
  #f40 50%, #089 0);

// 观察到哪个角最近
background-image: 
  radial-gradient(circle closest-corner, 
  #f40 50%, #089 0);

// 观察到哪个角最远
background-image: 
  radial-gradient(circle farthest-corner, 
  #f40 50%, #089 0);

更多径向渐变背景，请访问重复径向渐变：repeating-radial-gradient()

锥向渐变 Conic-gradient

. 角度渐变

. 适合做圆锥图/饼状图

. 默认从0/12点方向开始；可以使用 from 指定起始位置

. 可以使用度 deg 或百分比 %

. 使用0表示从前面部分结束的位置开始

. 更多信息，请访问 MDN - conic-gradient

background-image:
  conic-gradient([from angle] [at position,] color degree, color degree, ...);

基本渐变

background-image: 
  conic-gradient(#f3f3f3, #078);

// 划分3个区域：0-40deg、40-120deg、120-360deg
background-image: 
  conic-gradient(
    hsl(188, 100%, 40%) 0deg  40deg, 
    hsl(188, 100%, 27%) 40deg 120deg, 
    hsl(188, 100%, 20%) 120deg 360deg);

[] 环图 - 多背景或多元素；覆盖一个白色背景；可以使用伪元素

[] 动态饼图

其它 Other

background-blend-mode

. 指定上下层图像的混合模式

类别	说明
screen	滤色模式
overlay	叠加模式
darken	变暗模式
lighten	变亮模式
color-dodge	颜色减淡模式
saturation	饱和度模式
color	颜色模式
luminosity	亮度模式

. 原始图片、遮罩图片和合成图片

. 遮罩图片请使用高对比度素材

.blend-img {
    width: 320px;
    height: 180px;
    background: 
      url(../imgs/bg.jpg), 
      url(../imgs/mask.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-blend-mode: screen;
}

mix-blend-mode

. 普通元素和背景图片的混合模式

[] 文字背景

mix-blend-mode

.mbm {
  background-image: url(../../imgs/lg.jpg);
  background-size: cover;
  background-position: center;
}

.mbm>div {
  text-align: center;
  font-size: 60px;
  background-color: #fff;
  mix-blend-mode: screen;
}

[] 移除图片背景 - 和容器背景融合

1. 初始情况，图片背景和容器背景

2. 混合背景 darken - 两两相比取深色

.img1 img {
  mix-blend-mode: darken;
}

总结与作业 Summary & Homework

总结: . 渐变背景的使用
作业: 1. 为图片或代码打上水印; 2. 参照下图的设计，应用到个人网站，如信息介绍、导航背景等等