雪碧图

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>雪碧图</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.yi div,a{

width: 42px;

height: 30px;

color: red;

float: left;

background-image: url(../QQ图片20190328140756.png);

}

a{

background-position: -7px -338px;

}

a:hover{

background-position: -58px -338px;

}

</style>

</head>

<body>

<div class="yi">

<a href="#"></a>

</div>

</body>

</html>



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprites是一种网页图片应用处理方式。...
    小周师傅阅读 929评论 0 0
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS sprites是指把网页中很多小图片(很多...
    黄小仙130阅读 2,566评论 0 0
  • css sprite(雪碧图|精灵图)指什么?有什么作用? css sprite 是一种CSS图像合并技术,该方法...
    疯小儿阅读 591评论 0 0
  • 独坐凝眸,西风新暗青枝老。小笺闲了,心事知多少。 手捻幽兰,紧闭香檀小。荷花笑,惹人烦恼,午过无啼鸟。 ...
    田梦_阅读 465评论 11 38
  • 一辈子,我们有那么多的第一次 越长大,越害羞,越长大,越丢失了勇气和好奇。 记得小时候,什么事情总是第一个带头。天...
    随心小芝阅读 173评论 0 0