CSS-Vererbungsmethode

Gegeben sei ein Div mit folgendem Hintergrundbild:

Erstellen Sie den folgenden Reflexionseffekt:

Es gibt viele Methoden, aber wir müssen natürlich die schnellste und bequemste Methode finden, zumindest müssen wir unseren Code nicht ändern, egal wie sich das Bild ändert oder wie sich die div Größe ändert.

Methode 1: -webkit-box-reflect

Dies ist eine sehr neue CSS-Eigenschaft, die sehr einfach zu verwenden ist und unsere Inhalte in alle Richtungen widerspiegeln kann. Allerdings ist die Kompatibilität zu dürftig:

Grundsätzlich wird es nur von Browsern mit dem -webkit- Kernel unterstützt.

Aber es ist wirklich bequem zu verwenden. Die Lösung lautet wie folgt:

Aber es ist wirklich bequem zu verwenden. Die Lösung lautet wie folgt:

div{
    -webkit-box-reflect: unten;
}

box-reflect stehen vier Richtungen zur Auswahl: below | above | left | right , was unten, oben, links und rechts darstellt. Weitere Einzelheiten finden Sie bei MDN.

Methode 2: Erben, Vererbung verwenden

Diese Frage dient hauptsächlich dazu, diese Methode vorzustellen, die eine gute Kompatibilität aufweist.

Was bedeutet inherit ? In der Übersicht jeder CSS-Eigenschaftsdefinition wird angezeigt, ob die Eigenschaft standardmäßig vererbt wird („Inherited: Yes“) oder nicht („Inherited: no“). Dies bestimmt, wie der Wert berechnet wird, wenn Sie für das Attribut eines Elements keinen Wert angeben.

Die flexible Verwendung der inherit zum Vererben übergeordneter Werte kann viele scheinbar komplexe Probleme lösen. Für diese Frage fügen wir dem Bildcontainer ein Pseudoelement hinzu und verwenden background-image:inherit den Hintergrundbildwert vom übergeordneten Wert zu erben. Auf diese Weise muss unser CSS-Code nicht geändert werden, egal wie sich das Bild ändert:

div:vor {
    Inhalt: "";
    Position: absolut;
    oben: 100 %;
    links: 0;
    rechts: 0;
    unten: -100 %;
    Hintergrundbild: erben;
    transformieren: drehenX(180 Grad);
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Methode zum Vererben von CSS-Eigenschaften. Weitere relevante Inhalte zum Thema CSS-Vererbung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!