Подскажите, пожалуйста, если дочернему элементу задать background-image: inherit, то сколько раз фактически будет идти обращение на сервер для загрузки картинки: 1 раз (картинка загружается только для родителя) или 2 раза (картинка загружается и для родителя, и для дочернего элемента)?
Спасибо.
а код какой?
https://jsfiddle.net/gs2u6xbv/4/
Background: inherit.card {
position: relative;
width: 160px;
height: 240px;
margin: 0 auto;
background-image: url(“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZlcdPa8koPrG4d10hJAZ504nv7jCUhRB427bjxGiP091PxHpC”);
background-color: white;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 150px auto;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
}
.card::before {
content: “A”;
position: absolute;
top: 5px;
left: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-image: inherit;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 65px auto;
}
.card::after {
content: “A”;
position: absolute;
right: 5px;
bottom: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-image: inherit;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 65px auto;
transform: rotate(180deg);
}
Неужели никто не знает ответа?)
По логике получается, что должен быть один запрос.
Вы можете проверить это самостоятельно, в инструментах разработчика в браузере на вкладке “Сеть”.
1 лайк
Спасибо за совет.
Исходя из результатов в Chrome, запрос всего один.
Причём, если каждому из псевдоэлементов присваивать фоновое изображение через url, то запрос всё равно остаётся один.
1 лайк
в этом и смысл использования спрайтов 