html - 来自 png 文件的一部分的背景图像

Question

我有这张图片：

如何将 .png 文件的一部分用作图像？我想将上部用于我的课程<a class="non_check">，将下部用于我的<a class="checked">课程作为背景。

Answer 1

您将要使用 CSS 图像精灵。使用图像精灵，您可以只显示您想要使用的图像部分。

例如：

a.checked {
    width: 20px;
    height: 20px;
    display: block;
    background:url('image_here.png') 0px -20px;
}

a.unchecked {
    width: 20px;
    height: 20px;
    display: block;
    background:url('image_here.png') 0px 0px;
}

• 该background属性定义将成为 div 的背景的图像。
• 图片链接后面的数字定义了位置（第一个数字是left，第二个数字是top）。

JS 小提琴示例

CSS Sprites：它们是什么，为什么它们很酷，以及如何使用它们

Answer 2

您需要一个图像高度一半的图层（如 DIV 或 SPAN）。您将图像放置在背景中，并通过设置背景位置，您可以将图像部分移动到视图中或移出。

Answer 3

您将为此使用背景位置：悬停。像这样的东西：

.checkbox {
background:#ffffff url('checkbox.png') no-repeat 0 0;}
width:23px
height:21px;
}

.checkbox:hover {
background:#ffffff url('checkbox.png') no-repeat 0 21px;}
width:23px
height:21px;
}

Answer 4

您应该使用适当的 CSS。您可以组合固定width的 andheight和background,background-position属性，如下所示：

.checkbox
{
    width: 23px;
    height: 42px;

    background: url(checkbox-icons.png);
}

.checkbox.unchecked
{
    background-position: 0 0;
}

.checkbox.checked
{
    background-position: 0 -21px;
}

固定大小仅导致所需的背景矩形可见，并且通过更改background-position属性，您可以准确定义它应该是哪个片段。