У мене є біле зображення, яке я використовую як фон для div, і я хотів би забарвити, щоб він відповідав основному кольору тем. Я усвідомлюю, що можу зробити:
filter: sepia() saturate(10000%) hue-rotate(30deg);
і прокрутити, hue-rotate
щоб знайти колір, але чи можна обчислити це значення заздалегідь? Враховуючи, що вказане шістнадцяткове значення досить темне, я думаю, мені також потрібно буде включити invert(%)
фільтр.
Враховуючи шістнадцяткове значення, #689d94
яку математику мені потрібно зробити, щоб обчислити бажане hue-rotate
і invert
значення для перетворення мого білого фонового зображення в один колір?
Редагувати
Ось фрагмент div
із білим фоновим зображенням, що відфільтровується зеленим. Фокус тут у div
тому, що фільтрується все, а не лише зображення. Якби я ввів якийсь текст у div
текст, колір тексту також став би зеленим.
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}
<div>
</div>