如何仅使元素的图像部分可点击？

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