Кто-нибудь знает способ изменить один слой многослойного фона с помощью CSS?
Я искал вокруг, но не могу найти упоминаний о текущей или даже предлагаемой будущей спецификации. Мое мышление говорит, что, вероятно, не будет, но сеть теперь настолько обширна, что я уверен, что кто-то где-то имеет информацию или ссылки на дискуссии по этим направлениям.
Следующий пример, очевидно, будет иметь проблемы с порядком приоритета применительно к различным элементам:
.building-texture {
background: transparent, url(image/building-side.png);
}
.shade-dark {
background: url(image/shade-dark.png), unchanged;
}
.shade-mid {
background: url(image/shade-mid.png), unchanged;
}
.shade-light {
background: url(image/shade-light.png), unchanged;
}
<div class="building-texture shade-dark"></div>
Очевидно, что есть несколько обходных путей для вышеперечисленного, но ни один из них не идеален, особенно когда вы начинаете говорить о множестве разных "состояний слоев" и множестве разных "текстур":
Начальные решения
комбинированные занятия
Это самый оптимальный из запасных вариантов, но он становится нелепым, когда вы начинаете принимать во внимание префиксы вендоров и когда имеете дело с более чем двумя уровнями.
.building-texture-shade-dark {
background: url(image/shade-dark.png), url(image/building-side.png);
}
.building-texture-shade-mid {
background: url(image/shade-mid.png), url(image/building-side.png);
}
.building-texture-shade-light {
background: url(image/shade-light.png), url(image/building-side.png);
}
отдельные элементы
При проведении локальных тестов я обнаружил, что многослойные фоны выполняются быстрее, чем с использованием подэлементов. Фактически для большинства современных браузеров даже введение простого дочернего элемента (без применения фона) значительно замедляло рендеринг.
<div class="building-texture">
<div class="shade-dark"></div>
</div>
Генерация JavaScript
Чтобы избавиться от боли ручного ввода первого варианта (комбинированные классы), JavaScript может быть использован для генерации таблицы стилей. Но у вас все еще есть неловкость длинных имен классов. Кроме того, если вы хотите изменить один из примененных эффектов комбинированного класса (например, удалить затенение), вам нужно написать сценарий, чтобы понять, как это сделать, основываясь на соглашении об именах.
Стиль собственности через JavaScript
Другой вариант - динамически переписать весь фон с помощью .style для каждого элемента. Я не проверял это, но моя голова говорит мне, что это будет довольно неэффективно, так как я уверен, что браузеры могут сделать довольно много оптимизаций при работе с предустановленными классами (то есть, группируя рендеринг элементов по классификации). Хотя я могу ошибаться.
Почему...
Я играю с CSS-преобразованиями 3D (с включенной перспективой) и с тем, как лучше и проще и быстрее текстурировать/осветить такие структуры (пример кода):
(источник: pebbl.co.uk)
После неудачного создания CSS-решения, которым я был доволен, я в настоящее время направляюсь к решению на основе Canvas, которое предварительно построило бы все текстуры, которые мне могут понадобиться - вместе с их различными затененными состояниями - и затем сгенерировало бы URI кэшированных данных. быть прикрепленным как однослойный фон. Мои тесты показали, что это оптимально. Тем не менее, мне бы очень хотелось использовать как можно больше нативных браузерных решений, потому что в canvas задействовано гораздо больше кода, и, поскольку современные браузеры улучшаются так быстро, кажется глупым изобретать любые колеса, движки, или дорожные сети.
Даже если может показаться, что то, что я делаю, не является "правильным" использованием CSS, по моему мнению, каждый элемент фона - это отдельная единица - и для меня имеет смысл, что должен быть какой-то определенный способ изменения каждого блок по отдельности... даже если это далеко в будущем.
Я был бы заинтересован в любых ответах со ссылками на обсуждения по этим направлениям.