解决在文本覆盖图片情况下使图片能够点击

最新推荐文章于 2021-06-09 14:30:45 发布

搬砖攻城狮9527

最新推荐文章于 2021-06-09 14:30:45 发布

阅读量588

点赞数 1

本文链接：https://blog.youkuaiyun.com/a379130711/article/details/80896582

版权

本文介绍了一种利用CSS将图片设置为可点击链接的方法，并详细解释了如何通过调整z-index属性和使用pointer-events属性来确保链接功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将图片设为a标签使其能够点击

<a href="javascript:;" id="go-top"></a>

#go-top{
            width: 35px;
            height: 80px;
            background: url("go-top.jpeg") -22px 0 no-repeat;
            position: fixed;
            bottom: 50px;
            right: 50px;
            z-index: 0;
        }

图片使用绝对定位。为了使文本显示在图片之上要使用z-index,但不能设为负值，不然在页面之下无论如何都不能点击，所以设为0，将文本的z-index设为 1 ，就可使文本显示在图片上。

<pre style="position:absolute;z-index: 1;pointer-events: none;">

注意z-index要和position一起使用才能生效。

正常情况<pre>的z-index值大于<a>,所以<a>标签无法点击。

但是使用CSS3的语法

pointer-events: none;

使一切鼠标事件在<pre>上无效，于是就可以点击<a>了。