@Gradient Background

Linear-gradient
Radial-gradient
Conic-gradient

复合属性

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

线性渐变 Linear-gradient

说明

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

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

. 可以指定色块的大小/范围和方向

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

语法

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

普通渐变

[] 默认渐变：从上到下[180deg]

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

[] 0deg渐变：从下到上，可以看出，它的0deg并不是向右的，而是朝上↑

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

[] 45deg渐变：左下到右上

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

断点渐变

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

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

[] 切割色块

background-image: linear-gradient(135deg, 
    #f40 50%, transparent 0);

[] 斑马渐变

background-image: linear-gradient(90deg, 
    #f40 10%, 
    transparent 0, transparent 20%, 
    #f40, 0,  #f40 30%, 
    transparent 0, transparent 40%, 
    #f40, 0,  #f40 50%, 
    transparent 0, transparent 40%, 
    #f40, 0,  #f40 50%, 
    transparent 0, transparent 60%, 
    #f40, 0,  #f40 70%, 
    transparent 0, transparent 80%, 
    #f40, 0,  #f40 90%, 
    transparent 0, transparent 100%)

单切角渐变

. 断点渐变中，将其中一个色块设置为透明

. 可以是某个颜色到透明的渐变；也可以是透明到某个色块的渐变

[] 右上切角

linear-gradient(225deg, transparent 10px, #f40, 0, #f40 100%);

多切角渐变

. 多个背景图片叠加而成

. 每个背景图片以,分隔

. 先出现的在上面，后出现的在后面

[] 左上右上切角

. 两块：宽50%；高100%；一左一右放置

. 多个背景叠加，需要使用复合属性 background

. 不重复

background: 
    linear-gradient(135deg, transparent 10px, #f40, 0, #f40 100%),
    linear-gradient(225deg, transparent 10px, #f40, 0, #f40 100%) right;
background-size: 50% 100%;
background-repeat: no-repeat;

[] 四角切角

. 4块；宽高各为50%；分别放置4个角

. 不重复

background: 
    linear-gradient(45deg, transparent 10px, #f40, 0, #f40 100%) bottom left, 
    linear-gradient(135deg, transparent 10px, #f40, 0, #f40 100%) top left,
    linear-gradient(225deg, transparent 10px, #f40, 0, #f40 100%) top right, 
    linear-gradient(325deg, transparent 10px, #f40, 0, #f40 100%) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
//background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
//background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

[] 遮罩背景-利用透明的渐变背景和图片背景实现

. 图片位于底层；透明的渐变位于上层，所以渐变要写在前面

.mask-bg {
  height: 300px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.1)), url(../imgs/1.jpg) center/cover;
}

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

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

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

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

径向渐变 Radial-gradient

说明

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

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

语法

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%;

[]重复径向渐变：repeating-radial-gradient()

锥向渐变 Conic-gradient

说明

. 角度渐变

. 适合做圆锥图/饼状图

语法

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

[] 圆锥图

. 从0到360deg的渐变

.pie {
    background-image: conic-gradient(#f3f3f3, #078);
}

[] 饼图

. 整个圆周划分3个区域：0-40deg、40-120deg、120-360deg

.pie {
    background-image: conic-gradient(
        hsl(188, 100%, 40%) 0deg, 
        hsl(188, 100%, 40%) 40deg, 
        hsl(188, 100%, 27%) 40deg, 
        hsl(188, 100%, 27%) 120deg, 
        hsl(188, 100%, 20%) 120deg, 
        hsl(188, 100%, 20%) 360deg);
}

图像混和 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;
}

总结与作业 Summary & Homework

总结: . 渐变背景的使用
作业: . 参照下图的设计，应用到个人网站，如信息介绍、导航背景等等