Почему ссылки не кликабельны при непрозрачности изображения ниже 100%

#html #css #opacity

#HTML #css #непрозрачность

Вопрос:

Я создал этот небольшой проект, чтобы продемонстрировать свою проблему: 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=500amp;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%, ссылки кликабельны.

Может кто-нибудь помочь мне исправить это?

1. Похоже, проблема с z-индексом. установите для оболочки и раздела относительное положение и укажите значения индекса z. Кажется странным, что вы не просто используете фоновое изображение.

Ответ №1:

Изображение блокирует ваши события. Это из-за контекста стекирования. Элементы с непрозрачностью ниже 1 отображаются после других ваших элементов.

Я бы посоветовал добавить pointer-events: none; в ваш класс image-wrapper, если вам все равно взаимодействовать с ним.

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

Ответ №2:

Расположение ваших якорей (или их контейнера) с position: relative помощью решит вашу проблему, но это также предотвратит исчезновение ваших якорей по правилу opacity CSS. Мне неясно, является ли это намерением или побочным эффектом, но вы можете легко настроить свой opacity 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=500amp;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>

Ответ №3:

Добавьте это в свой css:

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

1. z-index здесь не поможет, потому что непрозрачность переполняется и портит ее, поскольку она отображается последней. Z-Index не предотвратит переполнение. Непрозрачность будет переполняться после z-индекса во время рендеринга, что делает z-индекс устаревшим. Используя редактор сниппетов, вы могли бы протестировать его самостоятельно.