Question

我有一个很大的图像，我想将该图像的一部分添加到按钮中。我有一个css类，它定义了我想要的整个图像的一小部分所在的左侧和顶部。我们说

.image
{
  left: -20;
  top: -200px;
}

我已经定义了另一个类来描述我想要放置这部分图像的位置。

.image16x16
{
  overflow:hidden;
  position:relative;
  height:16px;
  width:16px;
}

现在我正在尝试做这样的事情：

<button class='image16x16' type='button'><img class='image' src='image.png'/></button>

但是图像移动到保留区域之外。但是，如果我将按钮更改为简单的div或输入，则图像放置正确。

<div class='image16x16' type='button'><img class='image' src='image.png'/></div>

感谢。

Answer 1

请查看this page上的A List Apart。

CSS

div.sprite
{
    /*height and width of the sprites*/
    width: 16px;
    height: 16px;
    background-image: url("sprites.png");
    display: inline-block;
}
div.delete
{
    /*Pixel offsets within the image for a red cross*/
    background-position: 0px 0px;
}
div.confirm
{
    /*Pixel offsets within the image for a green tick*/
    background-position: 0x -16px;
}

HTML

<button>
    <div class="sprite delete"></div>
    Delete
</button>
<button>
    <div class="sprite confirm"></div>
    Confirm
</button>

Answer 2

不确定我是否完全理解您的问题，但由于DIV按预期工作，您可能只需要添加此css：

button { display: block; }

Answer 3

如果没有left以外的其他职位，

top和static没有任何意义！

.image
{
    position: absolute;
    left: -20;
    top: -200px;
}

此外，您无需将class="image"应用于<img>标记。只需使用：

.image16x16 img
{
    position: absolute;
    left: -20;
    top: -200px;
}

如何将图像的一部分添加到HTML中的Button

3 个答案:

CSS

HTML