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 Fiddle Example

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

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

Answer 3

您将使用背景位置：a悬停。像这样：

.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和height以及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属性，您可以准确定义它应该是哪个片段。