css图片背景之雪碧图的使用-CFANZ编程社区

css图片背景之雪碧图的使用

茗越 2022-04-30 阅读 103

标签: css 前端 css3

雪碧图的使用步骤

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

雪碧图的特点

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

雪碧图样例

举个例子

假设我们要使用图中红色标记的图像作为背景

在ps中查看该图像的宽和高并设置为盒子属性

将该图像在x轴和y轴的长度分别设置为background-position属性，注意（两个值为负）

最后便能在页面正常显示该图像了

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 34px;
            height: 24px;
            background-image: url("./images/amazon-sprite_.png");
            background-position: -129px -339px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

0 条评论