Question

我需要以下内容才能在网络和移动网络中工作：

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            left: 0;
            top: 0;
        }

        #wrapper{
            height: 100%;
            width: 100%;
        }

        #person{
            position: relative;
            width: 559px;
            height: 687px;
            background: url(pics/person.png) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .dot{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="person">
            <img src="pics/red-dot.png" class="dot" style="top: 110px; left: 314px">
        </div>
    </div>
</body>
</html>

我正在尝试显示以下图片：
enter image description here

我要用红点覆盖所有白点每个点都是可点击的，并且应该在点击时切换它的颜色（我将使用jQuery）。

我的问题： 对于所有主流浏览器和移动网页，用红点覆盖所有白点（主图像）的最佳做法是什么？

注意：现在，当我更改变焦并且红点移动时，背景图像会拉伸。

HTML5 - 具有可点击区域的图像

0 个答案: