css 如何在背景图片块中添加点击事件

wbrvyc0a 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(280)

我有一个背景图像，其中我需要添加一个点击事件到一个特定的部分/块。

BG图像：* x1c 0d1x
需要处理点击事件的部分/块：*

验证码：*

const div = document.querySelector('.container');
    div.addEventListener('click', () => {
      alert('The background image was clicked!');
    });

div {
      background-image: url("https://i.stack.imgur.com/AfygH.png");
      width: 800px;
      height: 400px;
      background-repeat: no-repeat;
    }

<div class="container"></div>

这段代码给警报，无论我们点击在背景图像，我同意这样，只有我做了我的代码。

要求：

但要求是，我如何才能显示在点击图像中的特定部分/块的警报，就像上面的图像中以绿色突出显示的那样？

css

来源：https://stackoverflow.com/questions/76091074/how-to-add-click-event-to-a-block-of-background-image

2条答案

按热度按时间

bihw5rsg1#

你可以尝试在背景上放置另一个不可见的div，使用css：

{
    opacity: 0;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
}

或者任何你想要的尺寸/位置。并将click事件附加到不可见的div。如果单击事件仍然不起作用，请确保不可见的div位于背景div（z索引）的顶部。

赞(0）回复(0）举报 2023-05-02

41zrol4v2#

你会在你点击的地方收到警报，因为那是你附加事件监听器的元素。
最好的方法来实现你想要的是创建一个透明的div，并将其放置在背景图像的顶部，无论大小或位置。然后，你可以将你的事件监听器附加到这个透明的div上。

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何在背景图片块中添加点击事件

2条答案

相关问题

热门标签

最新问答