给body添加全屏背景图(backgroung-size:cover),如何给图片上某一个区域添加点击事件,适应各个分辨率

有一个需求,需要全屏显示一张区域图,然后给某些区域添加点击事件,想了很久没有想到好的解决办法,暂时是这样应急的(给body设置背景图,backgroung-size:cover,然后根据屏幕定位,这样不同分辨率下定位的点击事件会偏移),哪位高手提示下解决办法,多谢image

最佳答案

放弃 background-size:cover

图片 放 DIV 里,width 100%, height 100%
所有响应区域 用 子DIV 覆盖,监听 CLICK 事件
用 transform 缩放 最外层的 DIV(自己计算 cover 需要缩放的比率)

这样 图片 和 响应事件的DIV 都是同样比例缩放的