Функция contrast
Функцията contrast се използва за корекция на контрастността на цвета.
Тя увеличава или намалява разликата между най-светлите и най-тъмните части на цвета,
правейки го по-изразителен или, обратно, по-приглушен.
Стойност 100% оставя цвета непроменен.
Стойности по-малки от 100% намаляват контрастността, стойности по-големи от 100% - увеличават.
Стойност 0% създава напълно сив цвят.
Синтаксис
contrast(amount)
Пример
Различни степени на контрастност за син цвят:
<div class="box contrast-50">50% контраст</div>
<div class="box contrast-100">100% контраст</div>
<div class="box contrast-150">150% контраст</div>
<div class="box contrast-200">200% контраст</div>
.box {
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
color: white;
text-align: center;
line-height: 100px;
}
.contrast-50 {
background: contrast(#3498db, 50%);
}
.contrast-100 {
background: contrast(#3498db, 100%);
}
.contrast-150 {
background: contrast(#3498db, 150%);
}
.contrast-200 {
background: contrast(#3498db, 200%);
}
:
Вижте също
-
функцията
brightness,
която регулира яркостта на цвета -
функцията
invert,
която инвертира цветовете