web前端HTML/CSS_7（利用背景图片设置导航栏背景和css精灵图练习）

最新推荐文章于 2023-05-02 20:57:02 发布

weixin_53068339

最新推荐文章于 2023-05-02 20:57:02 发布

阅读量1.8k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_53068339/article/details/115004711

版权

<!--
 * @Author: your name
 * @Date: 2019-10-12 12:15:46
 * @LastEditTime: 2021-03-08 14:58:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \html，css\code\exercise\07_背景重复.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1{
            width: 990px;
            height: 32px;
            margin: 0 auto;
            /* background-image: url('./img/07/bg.png');
            background-repeat: repeat-x; */
            /* background: url('./img/07/bg.png') repeat-x; */
            background: url('./img/07/bg.png') repeat-x;
        }
    </style>
</head>
<body>
    
    <div class="box1"></div>

</body>
</html>

在这里插入图片描述
2，CSS-Sprite
制作的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url('./img/09/btn.png')
        }

        a:hover{
            background-position: -93px 0;
        }

        a:active{
            background-position: -186px 0;
        }

/* 
        解决图片闪烁的问题：
            可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片
            这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题
            这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

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

        雪碧图的特点：
            一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
 */
        
        .box1{
            width: 128px;
            height: 46px;
            background-image: url('./img/09/amazon-sprite_.png');
            background-position:0 0;
        }

        .box2{
            width: 42px;
            height: 30px;
            background-image: url('./img/09/amazon-sprite_.png');
            background-position: -58px -338px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>

    <a href="javascript:;"></a>
    
</body>
</html>

weixin_53068339

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web前端HTML/CSS_7（利用背景图片设置导航栏背景和css精灵图练习）

<!DOCTYPE html>
复制链接

扫一扫