Блог

Главная - Вопросы по программированию - Как использовать границу, если в области стиля есть изображение-маска?

Как использовать границу, если в области стиля есть изображение-маска?

#html #css #sass #accessibility

Вопрос:

Итак, есть mask-image на CSS. И я подал :focus-visible {border: 2px solid black} заявление . Вкладка фокус/a11y работает нормально, но граница не отображается. Есть ли какое-либо альтернативное решение для этого случая? Почему граница не появляется (выглядит перекрывающейся mask image , но мне действительно нужно ее использовать mask-image )?

Код выглядит почти так,

 amp;icon{
    width: 12px;
    height: 12px;
    z-index: 1;
    object-fit: contain;
    position: relative;
    -webkit-mask-image: url(../../assets/icon/close.svg);
    mask-image: url(../../assets/icon/close.svg);
    amp;:focus-visible {
      border: 2px solid black;
    }
  }

Комментарии:

1. вы пробовали играть с devtools и вызывать различные состояния элементов (кнопка :hov ) и видеть, какое состояние вызывает какой стиль?

2. Да @vanowm, я тоже пробовал использовать devtools, но до сих пор понятия не имею.

3. Вы пробовали outline вместо border этого ?

4. Да, @Грэхамритчи. Контур, прямоугольная тень, граница. Но ни один из них не работает.

5. Если вы хотите собрать фрагмент / скрипку вместе, я разберу его для вас, я просто не могу понять, почему это не сработало бы, если бы вы не могли проверить и поиграть с ним!

Метки: ,