Question

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

我似乎能够使按钮尺寸工作等，但我似乎无法正确显示图像。

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

它似乎显示了我认为使用剪辑的按钮上的所有图标：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>

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

enter image description here

Answer 1

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

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

    }


    <button class="button1"></button>

Answer 2

我最后在我的图片中添加了一个课程

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

现在它就像它的意图一样显示。

在HTML中使用clip：rect on按钮

2 个答案: