html - 如何只使元素的图像部分可点击？

Question

当我使用

background: url("button.png") top/contain no-repeat;

它将正确地适合图像。但是当我将 div 设置为可点击时，它会收到来自整个 div 的点击，而不仅仅是上面有图像的部分，它能以某种方式修复吗？

Answer 1

确保您已将 div 设置为:

display: inline-block;

除此之外，您不希望在 div 中有填充。而只是将高度和宽度设置为按钮的确切尺寸。如果你想对齐按钮，你可以使用 margin。

div.myButton {
    background: url("button.png") top/contain no-repeat;
    display:inline-block;
    padding:0px;
    height:30px; /* For example 30px */
    width:80px; /* By 80px*/
    margin: 10px 0px;
}