实现CSS背景图片集中在同一个图片

快乐打工仔 分类:实例代码

CSS背景图片集中在同一个图片属于前端实例代码,有关更多实例代码大家可以查看

现在比较常用的一个优化措施是将背景图片都集中在一张图片上。

这可以有效的减少请求次数,下面就是一个与此相关的代码实例供大家参考一下。

图片如下:

前端教程

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
ul {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  border: 1px solid #ccc;
}
ul li {
  width: 63px;
  height: 48px;
  text-align: center;
  float: left;
}
ul li i {
  width: 32px;
  height: 28px;
  display: inline-block;
  background: url(data/attachment/forum/201609/09/184209tnzflph86hqn6ttw.png) no-repeat;
  margin-top: 30px;
  transition: all .2s linear;
  -webkit-transition: all .2s linear;
}
.icon1 {
  background-position: 0 -2px;
}
.icon2 {
  background-position: -66px -2px;
}
.icon3 {
  background-position: -132px -2px;
}
.icon4 {
  background-position: -192px -2px;
}
ul li:hover i.icon1 {
  background-position: 0px -39px;
}
ul li:hover i.icon2 {
  background-position: -66px -39px;
}
ul li:hover i.icon3 {
  background-position: -132px -39px;
}
ul li:hover i.icon4 {
  background-position: -192px -39px;
}
</style>
</head>
<body>
  <ul>
    <li>
      <i class="icon1"></i>
      <p>回复</p>
    </li>
    <li>
      <i class="icon2"></i>
      <p>收藏</p>
    </li>
    <li>
      <i class="icon3"></i>
      <p>转播</p>
    </li>
    <li>
      <i class="icon4"></i>
      <p>分享</p>
    </li>
  </ul>
</body>
</html>

实现的原理其实非常的简单,就是通过background-position属性来调节背景图片的位置,以此显示背景图片不同的位置,于是就实现了显示不同背景图案的效果;更多内容可以参阅相关阅读。

(1).transition参阅CSS3 transition一章节。

(2).background-position参阅CSS background-position一章节。

CSS背景图片集中在同一个图片,这样的场景在实际项目中还是用的比较多的,关于CSS背景图片集中在同一个图片就介绍到这了。

回复

我来回复
  • 暂无回复内容