为什么链接不能点击不是 100% 不透明度的图像

Question

我创建了这个小项目来演示我的问题：https://codepen.io/jmdagenais/pen/bGegrEV

.content {
    max-width: 450px;
}

.image-wrapper {
    height: 135px;
}

.image-wrapper img {
    opacity: 25%;
}

.button-section {
    text-align: center;
}

<div class="content">
    <div class="image-wrapper">
        <img src="https://agilewarrior.files.wordpress.com/2014/04/cirlce-illustrator.png?w=500&h=480">
    </div>

    <div class="button-section">
        <a href="http://www.google.com" target="_blank">Google</a>
        <a href="http://www.github.com" target="_blank">Github</a>
    </div>
</div>

我在工作时在网站上遇到过类似的情况。不是 100% 不透明度的图片上的链接是不可点击的。

如果图像的不透明度为 100%，则链接是可点击的。

有人可以帮我解决这个问题吗？

Answer 1

图片阻止了您的活动。那是因为the stacking context。不透明度低于 1 的元素会在其他元素之后渲染。

如果您不关心与它进行交互，我建议将pointer-events: none; 添加到您的图像包装类中。

.image-wrapper {
    height: 135px;
    pointer-events: none;
}

Answer 2

使用position: relative 定位您的锚点（或其容器）将解决您的问题，但它也会阻止您的锚点因不透明 CSS 规则而褪色。我不清楚这是有意还是有副作用，但如果需要，您可以轻松调整不透明度 CSS。

.content {
    max-width: 450px;
}

.image-wrapper {
    height: 135px;
}

.image-wrapper img {
    opacity: 25%;
}

.button-section {
    text-align: center;
    position: relative;
    /* opacity: 50% if you need */
}

<div class="content">
    <div class="image-wrapper">
        <img src="https://agilewarrior.files.wordpress.com/2014/04/cirlce-illustrator.png?w=500&h=480">
    </div>

    <div class="button-section">
        <a href="http://www.google.com" target="_blank">Google</a>
        <a href="http://www.github.com" target="_blank">Github</a>
    </div>
</div>

Answer 3

将此添加到您的 CSS：

a{
  position: relative;
  z-index: 50;
}