html+css实战169-css精灵-使用

教程管理员发布于2023-10-02 14:25 HTML教程 229

简介： html+css实战169-css精灵-使用

<!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>
        span {
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./images/taobao.png);
            /* 背景图位置属性: 改变背景图的位置 */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }

        b {
            display: block;
            width: 25px;
            height: 21px;
            background-color: green;
            background-image: url(./images/taobao.png);
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- <img src="./images/taobao.png" alt=""> -->
    <!-- 精灵图的标签都用行内标签  span, b, i -->
    <span></span>


    <b></b>
</body>
</html>

标签：#阿里 #开发者 #实战 #精灵 #社区 #html

上一篇：11款惊艳的HTML5粒子动画特效
下一篇：VSCode格式化html标签代码

html+css实战169-css精灵-使用

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠