雪碧图

作者: coolkid_carryon | 来源:发表于2018-09-12 10:43 被阅读0次

html文件:

<!DOCTYPE html>
<html>
<head>
<title>9-11</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-12T08:21:11+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/amazon.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="amazon"></div>
    <a class="amazon" href="#"></a>
</body>
</html>

css文件:

.amazon{
    width: 128px;
    height: 47px;
    background-image: url(../img/amazon.png);
    /*background-repeat: no-repeat;
    /*background-color: gray;*/
}
a:link{
    display: block;
    width: 42px;
    height: 30px;
    background-position: -10px -338px;
}
a:hover{
    background-position: -58px -338px;
}

雪碧图:


amazon.png

效果图:


sprite.png

相关文章

  • css-Sprite (雪碧图)

    雪碧图的使用场景: 不推荐使用雪碧图的地方: css Sprite(雪碧图)的实现原理: 雪碧图的实现方式: 作者...

  • CSS 雪碧图

    Question: 1、什么是雪碧图?2、为什么使用雪碧图?3、什么情况下适合使用雪碧图?4、雪碧图怎么使用?5、...

  • JS逆向:基于雪碧图的反爬策略与破解

    1. 雪碧图 1.1. 雪碧图 雪碧图(sprite)也叫CSS精灵, 是一CSS图像合成技术; 该方法是将小图标...

  • 什么叫 “雪碧图”?

    大家好,我是前端西瓜哥。今天来随意聊聊雪碧图。 雪碧图是什么? 雪碧图,英文原名叫 CSS sprites。 sp...

  • 亚马逊-雪碧图

    雪碧图

  • 任务9- CSS常见技巧

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 简介CSS Sprites(雪碧图|精灵图)是一种...

  • 前端—雪碧图

    使用雪碧图的优点有以下几点: 雪碧图的制作与使用方法:

  • 饥人谷-任务9-2

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 css雪碧图又叫css精灵或css sprite,...

  • 在rem单位下使用雪碧图实现自适应

    什么是雪碧图 雪碧图是根据CSS sprite音译过来的,就是将很多很多的小图标放在一张图片上,就称之为雪碧图。 ...

  • CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprite(雪碧图|精灵图)指该方法是将...

网友评论

      本文标题:雪碧图

      本文链接:https://www.haomeiwen.com/subject/bfgmgftx.html