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

【问题标题】：How do i make only the image part of an element clickable?如何仅使元素的图像部分可点击？
【发布时间】：2015-05-13 15:04:58
【问题描述】：

当我使用时

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

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

【问题讨论】：

<a href="..."><img src="button.jpg"></a>
@MörreNoseshine 是用css定义的背景图片
您使用图片作为背景并且不只是在您的 div 中放置 img 标签是否有原因？
OMG @MörreNoseshine 你是对的！很简单！我现在要做的就是添加 width="100%" 这样它就会在旋转时适应屏幕！谢谢！ :)
How to make background images clickable (javascript or css) 的可能重复项

标签： html css

【解决方案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;
}

【讨论】：