18.雪碧网页小图片的使用，可以将它们设置到一张大图上，然后用背景距离调控他们出现的位置！

咖喱鸡块

于 2016-07-21 19:59:11 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：雪碧

本文链接：https://blog.youkuaiyun.com/hh279768876/article/details/51986160

css 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种通过CSS背景定位来实现复杂网页布局的设计方法。利用背景距离属性，可以灵活地控制图片的位置，从而达到高效利用资源的目的。示例代码展示了如何在一个元素中使用大图并精确调整小图的位置。

雪碧

网页小图片的使用，可以将它们设置到一张大图上，然后用背景距离调控他们出现的位置！

<!-- <!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       div {
           width:475px;
           height:8px;
           background: url("radius.png") 0px -18px repeat-x;
       }
       strong {
           height:8px;
           display: block;
           background: url("radius.png") 0px 0px no-repeat ;
       }
       span {
           height:8px;
           display: block;
           background: url("radius.png") right -36px no-repeat ;
       }
   </style>
</head>
<body>
   <div>
       <strong>
           <span>


           </span>
       </strong>
   </div>
</body>
</html> -->