Lösung
Der einfachste Weg, um dieses Problem zu beheben, besteht darin, den Wert für die background-originEigenschaft als festzulegen border-box.
.colors {
width: 100px;
border: 10px solid rgba(0, 0, 0, 0.2);
height: 50px;
background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
background-origin: border-box;
}
<div class="colors"></div>
Grund für das fragliche Verhalten
Die folgenden relevanten backgroundEigenschaften bestimmen, wie der Hintergrundverlauf für diesen Fall angezeigt wird:
background-origin- Der Standardwert ist padding-box. Dies bedeutet, dass der Hintergrund tatsächlich in Bezug auf die Polsterbox positioniert ist und daher nach dem beginnt border.background-repeat- Der Standardwert hierfür ist repeat. Dies bedeutet, dass das Bild so oft wie nötig wiederholt werden sollte, um den gesamten Hintergrundmalbereich abzudecken.background-clip- Der Standardwert hierfür ist border-box. Dies bedeutet, dass das Bild auch unter dem Bereich vorhanden sein sollte, der von den Rändern der Box eingenommen wird.
Wenn wir nun alle drei kombinieren, können wir sehen, dass der Rand so oft wie möglich wiederholt werden muss, damit er auch unter den Rändern vorhanden ist, und dass seine Startposition hinter dem Rand der Box liegt. Dies bedeutet, dass der Hintergrund zyklisch wiederholt werden muss, um den Bereich unter dem Rand auf der linken Seite auszufüllen. Aus diesem Grund hat der linke Rand die Farbe als rechtes Ende des Verlaufs und umgekehrt.
Durch Ändern in border-boxwird der Hintergrund in Bezug auf das Rahmenfeld positioniert. Diese Einstellung wirkt sich auch auf die Größe des Hintergrundbilds aus, und der Grund dafür wird nachstehend ausführlich beschrieben.
Warum funktioniert das box-sizing: border-boxnicht?
Die Einstellung box-sizingals border-boxbewirkt keine Änderung, da diese Eigenschaft nur die Größe der Box beeinflusst. Es hat absolut keine Auswirkungen auf Folgendes:
- Die Größe des Gradientenbildes (die tatsächliche Berechnungslogik wird unten beschrieben)
- Der Startpunkt (oder die Position) des Verlaufsbildes
- Die Wiederholung des Hintergrundbildes
Wie berechnet sich die Größe des Gradienten?
Gemäß der W3C-Spezifikation werden im Folgenden die Abmessungen des Bildes berechnet, wenn keine explizite Größe angegeben ist (Standardwert ist auto).
Wenn das Bild weder eine Eigenbreite noch eine Eigenhöhe hat, wird seine Größe wie für "Enthalten" bestimmt.
Beachten Sie, wie es um die Größe des Bildes und nicht um die der Box geht. Unabhängig von der Größe des Felds würde die Größe des Hintergrundbilds im Wesentlichen basierend auf der Definition für das Schlüsselwort berechnet, containwenn das Bild selbst keine intrinsische Höhe hat ( die CSS-Verläufe im Gegensatz zu Bildern nicht haben ).
Die Definition fürcontain lautet wie folgt:
Skalieren Sie das Bild unter Beibehaltung seines intrinsischen Seitenverhältnisses (falls vorhanden) auf die größte Größe, sodass sowohl seine Breite als auch seine Höhe in den Hintergrundpositionierungsbereich passen .
Der Hintergrundpositionierungsbereich ist wie folgt definiert (unter background-originEigenschaftsdefinition):
Gibt für Elemente, die als einzelnes Feld gerendert werden, den Hintergrundpositionierungsbereich an
Wenn das Bild keine intrinsische Höhe hat (und in diesem Fall auch keine background-size), wäre die Größe des Bildes gleich der des background-originWertes von (was in unserem Fall der Fall ist padding-box).
Aus diesem Grund hat auch das Einstellen des box-sizingas border-boxkeine Auswirkung.
Hinweis: Die Betonung in den zitierten Texten liegt ausschließlich bei mir
Wenn Sie explizit background-sizedie Größe des Felds festlegen , werden Sie feststellen, wie das Problem auf der rechten Seite, jedoch nicht auf der linken Seite behoben wird. Dies liegt daran, dass das Bild jetzt groß genug ist, um nicht unter dem rechten Rand wiederholt zu werden, aber sein Startpunkt immer noch hinter dem linken Rand liegt.
.colors {
width: 100px;
border: 10px solid rgba(0, 0, 0, 0.2);
height: 50px;
background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
background-size: 110px 60px;
}
.colors-2 {
width: 100px;
border: 10px solid rgba(0, 0, 0, 0.2);
height: 50px;
background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
box-sizing: border-box;
background-size: 100px 50px;
}
<div class="colors">
</div>
<div class="colors-2">
</div>
