CSS-Regeln in unterschiedlicher Reihenfolge führen zu unterschiedlichen Ergebnissen - CSS, Hintergrund, Maske

Ich habe gerade einen CSS-Background-Clip angeschaut.Es ist eine Möglichkeit, Text mit einem Bild zu maskieren. (oder umgekehrt? ^^). Wie auch immer, ich dachte, die Reihenfolge der Anweisungen in CSS würde das Ergebnis nicht beeinflussen, aber mit Hintergrund-Clip.

Das CSS für diesen Effekt sieht normalerweise so aus:

.text{
color: transparent;
background: url(pic.ending);
-webkit-background-clip: text;
}

Also, das ist das Erste <p> in der Geige unten. Aber wenn ich die Reihenfolge zu folgenden ändern:

.text_wrong{
-webkit-background-clip: text;
color: transparent;
background: url(pic.ending);
}

Es funktioniert nicht. Der Text ist nicht maskiert, der Hintergrund findet im Loch statt <p>. Der Fehler tritt auf, wenn der Hintergrundclip vor dem Hintergrund ist, richtig?

Warum? Hast du irgendeine Idee? Entschuldigung für mein schlechtes Englisch. (Hier ist die Geige.)

Antworten:

3 für die Antwort № 1

background ist die Kurzschreibweise für die Hintergrundeigenschaften. Dadurch werden alle anderen zuvor erstellten Hintergrundregeln überschrieben. Obwohl -webkit-background-clip Hat ein Lieferantenpräfix, ist es immer noch eine Hintergrundeigenschaft. In Ihrem zweiten Beispiel wird es überschrieben, wenn Sie die Hintergrundeigenschaften mit der Kurzschreibweise einstellen.

Um Ihr Beispiel zu arbeiten, können Sie verwenden background-image Anstatt von background.

Beispiel

/* sets a single property */
background-color: red;
/* overwrites all single properties */
background: no-repeat;

Demo

Probieren Sie vor dem Kauf aus


1 für die Antwort № 2

Dies wird Cascading genannt und das ultimative Ziel von CSS ist es, diejenigen Elemente zu repräsentieren, die in der Kaskade als letzte deklariert sind.

Nehmen wir zum Beispiel an, dass die unten angegebene CSS-Deklaration in Stylesheets ist.

div{height:15px;}

div{height:30px;}

div{height:20px;}

Also wird das Div die Höhe annehmen 20px Da dies die letzte deklarierte Regel ist, werden alle zuvor deklarierten Regeln überschrieben.

Hoffe das löst deine Anfrage.


1 für die Antwort № 3

Laut den w3c Spezifikationen der Wert text zum background-clip ist kein in den Spezifikationen aufgelisteter Wert. Daher kann die Unterstützung fehlerhaft sein!

http://www.w3.org/TR/css3-background/#background-clip

Bestimmt den Hintergrundanstrichbereich, der den Bereich bestimmt innerhalb dessen der Hintergrund gemalt wird. Die Syntax der Eigenschaft lautet gegeben mit

= Grenzbox | Füllbox | Inhaltsfeld


Speisekarte