Wie oft greifen Sie zur CSS-Eigenschaft background-size? Wenn Sie wie ich sind – und wahrscheinlich viele andere Frontend-Entwickler – dann ist es normalerweise, wenn Sie background-size: cover auf ein Bild anwenden, um den Platz eines ganzen … auszufüllen.
Wie der Titel schon sagt, werden wir Bilder dekorieren! Es gibt eine Menge anderer Artikel, die darüber sprechen, aber was wir hier behandeln, ist ganz anders, weil es eher eine Herausforderung ist. Die Herausforderung? …
Die Welle ist wahrscheinlich eine der schwierigsten Formen, die man in CSS erstellen kann. Wir versuchen immer, sie mit Eigenschaften wie border-radius und vielen magischen Zahlen zu approximieren, bis wir etwas haben, das irgendwie nahe kommt. Und das ist, bevor ...
Ich kann nicht sagen, dass ich background-clip oft benutze. Ich wette, es wird im alltäglichen CSS-Gebrauch kaum verwendet. Aber ich wurde in einem Beitrag von Stefan Judis daran erinnert, der zufällig selbst eine Lernantwort auf ... war.
Eine coole Sache an CSS-Benutzereigenschaften ist, dass sie ein Teil eines Wertes sein können. Nehmen wir an, Sie verwenden mehrere Hintergründe, um ein Design zu realisieren. Jeder Hintergrund hat seine eigene Farbe, Bild, Wiederholung, Position usw. Es ...
Sie wissen, wie Sie mehrere Hintergründe haben können?
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}Das ist nur background-image. Sie können auch deren Position festlegen, wie Sie es erwarten würden. Wir werden es abkürzen
body {
background:
url(image-one.jpg) no-repeat top right,
url(image-two.jpg) Mit „CSS-Bildern“ meine ich Bilder, die ausschließlich mit HTML-Elementen und CSS erstellt werden. Sie sehen aus, als wären sie in Adobe Illustrator gezeichnete SVGs, wurden aber direkt im Browser erstellt. Einige Techniken, die ich gesehen habe …
Mit CSS können Sie den Hintergrund von Elementen steuern. Sie können eine background-color festlegen, um ihn mit einer Volltonfarbe zu füllen, eine background-image, um ihn (Sie haben es erraten) mit einem Bild zu füllen, oder sogar beides
body {
background-color: red;
background-image: