Deckkraft vs. CSS-Filter

Wenn wir Text auf Bildern platzieren, stehen wir immer vor dem Problem der Lesbarkeit.

Ich spiele oft mit der Deckkraft, um dieses Problem zu beheben. Und es gibt die CSS-Filtereigenschaft und ihre vielen Effekte.

Standardmäßig denke ich, dass Letzteres eine qualitativere Darstellung bietet als die Deckkraft. Aber ich möchte es klarstellen.

Mit Deckkraft

Es ist ganz einfach. Wir fügen dem übergeordneten Element eine Hintergrundfarbe hinzu und spielen mit der Deckkrafteigenschaft des Bildes.

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

Mit CSS-Filter

Mit der Filtereigenschaft können Sie Filter oder Grafikeffekte anwenden.
Diese Eigenschaft bietet die folgenden Filter: Unschärfe, Helligkeit, Kontrast, Schlagschatten, Graustufen, Farbtondrehung, Invertieren, Deckkraft, Sättigung und Sepia.

Der Filter, der mich hier interessiert, ist die Helligkeit.
Es ist sogar einfacher als Opazität. Wir wenden die Filtereigenschaft auf das Bildelement an.

.element-image {
  filter: brightness(0.7);
}

Das Ergebnis

Ich habe einen Codepen zum Vergleich gemacht.
Links die Opazitätsversion und rechts die Filterversion.
Ergebnis der Rennen, ich sehe keinen Unterschied!

Wenn Sie sich also fragen, welche Lösung Sie verwenden sollen, sage ich Ihnen, dass es wie Voulvoul ist. Diejenige, die am besten zu Ihnen passt.

Das obige ist der detaillierte Inhalt vonDeckkraft vs. CSS-Filter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!