Заполнить фон изображением спрайта

194
14 сентября 2017, 16:34

Как в css можно заполнить фон выбранным из общего спрайта изображением?

Answer 1

Если повторение нужно только по одной из осей, то может помочь border-image:

div { 
  height: 200px; 
  outline: 1px dotted red; 
  position: relative; 
} 
 
div:before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  z-index: -1; 
  border-top: 64px solid; 
  border-image: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon&r=PG) 64 64 0 round round; 
}
<div>Тут может быть тест</div> 
<img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=256&d=identicon&r=PG">

Answer 2

В настоящее время средствами только CSS не получится.

Может если вставить картинку в svg, потом svg встроить как-то так background-image: url('data:...')... Но это уже изврат. Что-то мне кажется производительность браузера при этом будет хуже чем при отрисовке обычной картинки

READ ALSO
В бд mysql есть куча символов \u00AD

В бд mysql есть куча символов \u00AD

В БД MySQL есть куча скрытых символов

240
Не выполняется большой запрос в скрипте

Не выполняется большой запрос в скрипте

Запрос большой на Select, в workbench'е за 1500 сек отпрабатывает, через скрипт, используя mysqli, несколько секунд работает и результата нет, ошибок тоже...

273
Одна строка много колонок inner join

Одна строка много колонок inner join

Имеется следующая структура таблиц

205
Объединить запросы к разным таблицам MySQL

Объединить запросы к разным таблицам MySQL

Есть 1 запрос, который получает информацию о пользователе по его username:

276