如何僅使元素的圖像部分可點擊？

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