1. 雪碧图

解决图片闪烁的问题：

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

雪碧图的使用步骤：

先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景图片
设置一个偏移量以显示正确的图片
雪碧图的特点：

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
示例1

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">
      a:link {
            display: block;
            width: 93px;
            height: 29px;
            background: url("./button2.png");
            /* 默认值，可以不设置 */
            background-position: 0 0;
        }
    a:hover {
        /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
        background-position: -93px 0;
    }
    a:active {
        /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
        background-position: calc(-93px*2) 0;
    }

 </style>


 <div id="" class="">
    <a href="javascript:;"></a>
 </div>

 </body>
</html>

2. 线性渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

！！渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化 linear-gradient()

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

线性渐变的开头，我们可以指定一个渐变的方向

to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈

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

css- 雪碧图与渐变

1. 雪碧图

2. 线性渐变

猜你喜欢