Funktion contrast

Die Funktion contrast wird verwendet, um den Kontrast einer Farbe anzupassen. Sie erhöht oder verringert den Unterschied zwischen den hellsten und dunkelsten Teilen der Farbe, macht sie dadurch ausdrucksstärker oder im Gegenteil, gedämpfter. Ein Wert von 100% lässt die Farbe unverändert. Werte unter 100% verringern den Kontrast, Werte über 100% erhöhen ihn. Ein Wert von 0% erzeugt eine vollständig graue Farbe.

Syntax

csscontrast(amount)

Beispiel

Verschiedene Kontraststufen für die Farbe Blau:

html<div class="box contrast-50">50% Kontrast</div>
<div class="box contrast-100">100% Kontrast</div>
<div class="box contrast-150">150% Kontrast</div>
<div class="box contrast-200">200% Kontrast</div>

css.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%);
}

Результат:

Siehe auch