css精灵图

最新推荐文章于 2024-07-25 16:45:46 发布

前端啊久

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量41

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44864468/article/details/114682452

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

笔记：将图片转为大图使用background-position调整大图位置，可以减轻网页加载速度


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            section{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                float: left;
            }
            section:nth-of-type(1){
                background: url(images/1.png) 120px 0px;
            }
            section:nth-of-type(2){
                background: url(images/1.png)  1px 0px; 
            }
            section:nth-of-type(3){
                background: url(images/1.png)  1px 120px; 
            }
            section:nth-of-type(4){
                background: url(images/1.png)  1px 2400px; 
            }
            section:nth-of-type(5){
                background: url(images/1.png)  120px 0px; 
            }
        </style>
    </head>
    <body>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </body>
</html>

前端啊久

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css精灵图

笔记：将图片转为大图使用background-position调整大图位置，可以减轻网页加载速度<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> section{ width: 100px;
复制链接

扫一扫

专栏目录