1

我正在尝试使用 CSS 将图像加载到按钮。

我似乎能够使按钮大小起作用等，但我似乎无法正确显示图像。

我的icons.png 有8 个图标，我只想在按钮上显示其中一个。我正在尝试使用 clip:rect 来选择其中一个，但它似乎不起作用。

它似乎显示了按钮上的所有图标，我认为使用 clip:rect 可以让我只选择图像中的一个图标。

有谁知道我哪里出错了？（注意：我不能为此使用 jQuery）

这是我正在使用的 CSS 和 HTML。

<style type="text/css">
.button1
{
    position:absolute;
    left: 20px;
    width:100px; 
    height:100px;
    top:20px;
    clip:rect(0px,100px,100px,0px); /* rect(top, right, bottom, left) */ 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
}

</style>


<body bgcolor="#DFDFDF">

    <button class="button1"><img src="icons.png"/></button>

</body>

这就是它正在做的事情。。

在此处输入图像描述

4

2 回答 2

0

将按钮图像移动到样式。您已经使用宽度和高度定义了按钮的大小。如果按钮大于“精灵”图像（预期的按钮背景），您将看到下一个按钮图像。位置和按钮大小都需要正确调整大小。从您的示例图像中，按钮的大小必须更小，大约 70 像素左右。

    .button1
    {
        width:100px; 
        height:100px;   
        background-image: url(icons.png);
        background-position: -70px -10px; /* hor vert from top left*/

    }


    <button class="button1"></button>
于 2012-10-23T01:11:54.167 回答
0

我最终为我的图像添加了一个类

<style type="text/css">
.button1
{
    position:absolute;
    left: 20px;
    width:100px; 
    height:100px;
    top:20px;
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
}


  img.button_logo
    {
        position:absolute;
        left: 20px;
        top:20px;
        clip:rect(0px,100px,100px,0px); /* rect(top, right, bottom, left) */ 
        cursor: pointer; /* hand-shaped cursor */ 
        cursor: hand; /* for IE 5.x */ 
    }

</style>


<body bgcolor="#DFDFDF">

    <button class="button1"><img class="button_logo" src="icons.png"/></button>

</body>

现在它的显示就像它本来的样子。

于 2012-10-23T02:17:55.060 回答