So verwenden Sie Haltepunkte und Medienabfragen mit Hintergrundclip in Tailwind

So Verwenden Sie Haltepunkte Und Medienabfragen Mit Hintergrundclip In Tailwind



Beim Erstellen verschiedener Abschnitte auf einer Webseite kann es vorkommen, dass der Programmierer den Hintergrund ausschneiden oder ändern muss, um den Inhalt zu sammeln. Diese Methode hilft bei der effektiven Verwaltung des angehängten Inhalts und bei der Gestaltung verschiedener Seitenabschnitte.

In diesem Blog werden die folgenden Kernkonzepte näher erläutert:

Wie verwende ich Haltepunkte und Medienabfragen mit Hintergrundclip in Tailwind?

Der ' bg-clip-{keyword} Das Dienstprogramm „wird verwendet, um den Begrenzungsrahmen des Hintergrunds des Elements festzulegen. Dieses Dienstprogramm kann mit mehreren Eigenschaften verwendet werden, wie zum Beispiel „ Polsterbox ',' Grenzfeld ',' Inhaltsbox ', Und ' Textfeld “.





Beispiel 1: Anwenden von Haltepunkten mit Hintergrundclip in Tailwind

In diesem Beispiel werden die Haltepunkte mit dem Hintergrundclip über das angewendete „ bg-clip-{keyword} „Dienstprogramm mit“ md ” d. h. mittelgroße Bildschirme und „ lg ” d. h. große Bildschirmklassen:




< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >
< / Kopf >
< Körper >
< Textbereich Klasse = „bg-clip-border p-6 bg-gelb-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding“ > Das ist Tailwind CSS < / Textbereich >
< / Körper >
< / html >

Gemäß diesen Codezeilen:



  • Geben Sie zunächst den CDN-Pfad an, um die Tailwind-Funktionen nutzen zu können.
  • Erstellen Sie dann ein „