每天一个CSS（background-position)

最新推荐文章于 2024-09-23 11:30:11 发布

direnmao1376

最新推荐文章于 2024-09-23 11:30:11 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/Eastsong/p/3754189.html

版权

目标：选取图片的一部分做为html标签的背景。

主要应用到的样式：

background：设置背景图片

background-position : 设置背景图片的起始坐标。

width：设置标签的宽度

height：设置标签的高度

示例：以中国铁路客户服务中心 12306的新界面的部分小图标为例。以下红圈中圈定的内容都可以通过截取设定背景图片的部分内容来实现。

实现步骤：

1）首先生成以小图标为背景的图片如下：

我们要提前知道每个小图标在图片中的位置及其大小。（假设我们取第一个小图标位置（ 0 0 ）大小 16 * 16 ）

2）设置css样式

主要样式如下：

        width: 16px;
        height: 16px;
        background: url('icon.jpg') no-repeat;
        background-position: 0 0;

代码如下：

<html>
<head>
    <style type="text/css">
    .num{
        display: block;
        width: 16px;
        height: 16px;
        color:#fff;
        text-align: center;
        background: url('icon.jpg') no-repeat;
        background-position: 0 0;
    }

    </style>
</head>
<body>
    <span class="num">1</span>
</body>
</html>