css截图做图标

使用css截取图片指定区域、指定大小。用这个方法可以将图标放在同一张图片上,然后再截取。

示例图:

图片[1]-css截图做图标 - KEKC博客-KEKC博客

background-position支持的值:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x% y% (百分比)
  • xpos ypos (像下面的像素)

当然也可以混合使用:

background-position: 10% center;
background-position: 10px center;
background-position: 10px 10%;
background-position: right 10px bottom;
background-position: right 10% bottom 10px;

我写的例子:

<html>
<head>
<style type="text/css">
.tubiao{
float: left;
width: 46px;
height: 46px;
background: url(图片的url) no-repeat;
background-position: -146px -907px;
}
</style>
</head>
<body>
<i class="tubiao"></i>
<!--注释-->
<!--
background-position是移动位置
第一个值是水平位置,第二个值是垂直。
从左往右移动146个像素,从上往下移动907个像素
-->
</body>

</html>

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享