12-雪碧图与渐变

雪碧图与渐变

1.雪碧图

解决图片闪烁问题
就是把多个图片放在一个图片里面，然后通过调整background-position来显示对应的图片，这种图片就叫雪碧图

这样的好处

• 解决闪烁问题
• 文件小，加载速度快，访问快，提升用户体验

使用方法：

1. 先确定使用图中的哪个图标
2. 测量图标大小
3. 根据图标大小创建一个元素
4. 将雪碧图设置为元素的背景
5. 设置一个偏移量以显示正确的图片

示例1
使用的雪碧图

a:link {
    display: block;
    width: 93px;
    height: 29px;
    background: url("assets/背景/练习2-背景/btn.png");
    /* 默认值，可以不设置 */
    background-position: 0 0;
}

a:hover {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: -93px 0;
}

a:active {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: calc(-93px*2) 0;
}

效果

示例2

.box1 {
    width: 109px;
    height: 33px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -10px -10px;
}

.box2 {
    width: 42px;
    height: 30px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -58px -338px;
}

效果

2 . 线性渐变 linear-gradient

一个颜色到一个颜色的过渡

注意：渐变是图片，不是背景颜色

所以通过background-image来进行设置

# 红色在开头，黄色在结尾，中间是过渡区域
background-image: linear-gradient(red, yellow);

渐变也可以多个颜色

background-image: linear-gradient(red, yellow,green,blue);

指定渐变的方向

• to left
• to right
• to bottom
• to top
• xx deg 多少度
• trun 圈

background-image: linear-gradient(to left, red, yellow);
background-image: linear-gradient(to right, red, yellow);
background-image: linear-gradient(to top, red, yellow);
background-image: linear-gradient(to bottom, red, yellow);

background-image: linear-gradient(45deg, red, yellow);

设置度数的效果

渐变多个颜色平均分配repeating-linear-gradient()

background-image: repeating-linear-gradient(red 0px, yellow 50px);

由于我们设置的div宽高为200px，所以会有4次重复的渐变效果

3.径向渐变radial-gradient()

径向渐变（放射性的效果）

background-image: radial-gradient(red, yellow);

默认情况下，径向渐变的形状根据元素的形状来计算的

比如长方体就是椭圆放射

手动指定放射形状

• circle 圆形
• ellipse椭圆

background-image: radial-gradient(circle, red, yellow);

渐变位置

• top right left center bottom

background-image: radial-gradient(at left, red, yellow);