@Mr_Funtikov

Почему при наведении на элемент заново начинается загрузка background-image: url(…) в before?

Приветствую знатоков.

Стилизую checkbox и добавляю к нему изображение галочки в before через background-image: url(…). После в DevTools во вкладке network вижу, что при каждом изменении или просто наведении на checkbox заново загружается эта картинка из memory cache.

Такого не происходит при первоначальной загрузке страницы, когда файл css кэшируется (аналогично с функцией Disable cache в DevTools). При последующих загрузках страницы для каждого checkbox загружается одна и та же картинка из памяти.

С чем это связано и можно ли это исправить в моём случае?
Все необходимые материалы прилагаю.

Ссылка на сайт с данной проблемой: https://funtikovlab.site/test/index.html.

Скриншот данной проблемы:
CssDevTools.jpg

Сам CSS код:
input[type="checkbox"] {
  --size: 50px;

  outline: none;
  appearance: none;
  width: var(--size);
  height: var(--size);
  box-shadow: 0px 0px 0px 2px rgb(175, 175, 175);
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: url("check.png");
  background-size: 90% 90%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}

input[type="checkbox"]:hover {
  box-shadow: 0px 0px 0px 2px rgb(77, 66, 224);
}

input[type="checkbox"]:checked {
  box-shadow: 0px 0px 0px 2px rgb(77, 66, 224);
  background-color: rgb(50, 132, 255);
}

input[type="checkbox"]:checked::before {
  opacity: 1;
}
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы