<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-image: url('map.jpg');
        background-size: cover;
    }
<pre><code>.button {
    position: absolute;
    background-color: red;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
</code></pre>
</style>
</head>
<body>
<pre><code>&lt;button class='button' style='top: 100px; left: 200px;' onclick='displayText('Button 1 clicked!')'&gt;Button 1&lt;/button&gt;
&lt;button class='button' style='top: 300px; left: 500px;' onclick='displayText('Button 2 clicked!')'&gt;Button 2&lt;/button&gt;
&lt;button class='button' style='top: 500px; left: 800px;' onclick='displayText('Button 3 clicked!')'&gt;Button 3&lt;/button&gt;

&lt;script&gt;
    function displayText(text) {
        alert(text);
    }
&lt;/script&gt;
</code></pre>
</body>
</html>
HTML代码:随机位置的红色圆形按钮,点击显示文字

原文地址: https://www.cveoy.top/t/topic/ph9x 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录