在HTML中使用clip:rect on按钮
我正在尝试使用CSS将图像加载到按钮 我似乎能够使按钮大小等工作，但我似乎不能得到正确的图像显示 My icons.png有8个图标，我只想在按钮上显示其中一个。 我试图使用clip:rect来选择其中一个，但它似乎不起作用 它似乎显示了按钮上的所有图标，我认为使用clip:rect可以让我只选择图像中的一个图标 有人知道我哪里出错了吗？ 注意：我不能使用jQuery进行此操作 这是我正在使用的CSS和HTML在HTML中使用clip:rect on按钮,html,css,Html,Css,我正在尝试使用CSS将图像加载到按钮 我似乎能够使按钮大小等工作，但我似乎不能得到正确的图像显示 My icons.png有8个图标，我只想在按钮上显示其中一个。 我试图使用clip:rect来选择其中一个，但它似乎不起作用 它似乎显示了按钮上的所有图标，我认为使用clip:rect可以让我只选择图像中的一个图标 有人知道我哪里出错了吗？ 注意：我不能使用jQuery进行此操作 这是我正在使用的CSS和HTML <style type="text/css"> .button1 {
<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>
将按钮图像移动到样式。您已经用宽度和高度定义了按钮的大小。如果按钮大于精灵图像，您将看到下一个按钮图像。位置和按钮大小都需要正确调整。根据您的示例图像，按钮的大小必须更小，大约70像素左右
.button1
{
width:100px;
height:100px;
background-image: url(icons.png);
background-position: -70px -10px; /* hor vert from top left*/
}
<button class="button1"></button>
我最终在我的图像中添加了一个类
<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>