快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

背景图片集中在同一个图片上代码实例

2017-4-12 22:55| 发布者: antzone| 查看: 428| 评论: 0|来自: 蚂蚁部落

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

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

图片如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/12/225608iwoydqsfb2b2qfbv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:40 , Processed in 0.063803 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部