为什么使用非 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

使用 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 2

图片挡住了您的活动。那是因为 the stacking context。不透明度低于 1 的元素在其他元素之后呈现。

我建议将 pointer-events: none; 添加到您的 image-wrapper class 如果您不介意与它互动。

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

Answer 3

将此添加到您的 css：

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

为什么使用非 100% 不透明度的图像无法点击链接

Why links are not clickable with an image that is not 100% opacity

html

css

opacity