Sådan bruger du brudpunkter og medieforespørgsler med baggrundsklip i medvind

Sadan Bruger Du Brudpunkter Og Medieforesporgsler Med Baggrundsklip I Medvind



Mens du opretter forskellige sektioner på en webside, kan der være scenarier, hvor programmøren skal klippe baggrunden eller ændre den for at akkumulere indholdet. Denne metode hjælper med at administrere det vedhæftede indhold effektivt samt style forskellige sidesektioner.

Denne blog uddyber følgende kernekoncepter:

Hvordan man bruger/udnytter brudpunkter og medieforespørgsler med baggrundsklip i medvind?

Det ' bg-clip-{keyword} ”-værktøjet bruges til at indstille afgrænsningsrammen for elementets baggrund. Dette værktøj kan bruges med flere egenskaber, såsom ' polstring-boks ', ' grænse-kasse ', ' indholdsboks ', og ' tekst-boks ”.





Eksempel 1: Anvendelse af brudpunkter med baggrundsklip i medvind

Dette eksempel anvender brudpunkterne med baggrundsklippet via den anvendte ' bg-clip-{keyword} ' værktøj med ' md ' dvs. mellemstore skærme og ' lg ” dvs. skærmklasser i stor størrelse:




< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< manuskript src = 'https://cdn.tailwindcss.com' >< / manuskript >
< / hoved >
< legeme >
< tekstområde klasse = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-stipled md:bg-clip-text lg:bg-clip-padding' > Dette er Tailwind CSS < / tekstområde >
< / legeme >
< / html >

Ifølge disse kodelinjer:



  • Angiv først CDN-stien for at gøre brug af Tailwind-funktionaliteterne.
  • Lav derefter et ''-element, der omfatter ' bg-clip-{keyword} ”-værktøjet, så det er indstillet til “border” på små skærme og indstillet til “ bg-klip-tekst ' og ' bg-clip-polstring ' hjælpeprogrammer på mellemstore og store skærme via ' md ' og ' lg ” klasser, hhv.

Bemærk: At angive værktøjet er simpelthen det samme som at angive det i ' sm ' klasse.



Produktion



Dette resultat betyder, at ved udvidelse af skærmstørrelsen klippes baggrunden i overensstemmelse hermed.

Eksempel 2: Anvendelse af medieforespørgsler med baggrundsklip i medvind

Følgende kodedemonstration anvender medieforespørgslerne med 'Baggrundsklip' via ' @medier reglen og den angivne parameter:


< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< manuskript src = 'https://cdn.tailwindcss.com' >< / manuskript >
< / hoved >
< legeme >
< tekstområde klasse = 'p-6 bg-gul-500 kant-4 kant-rød-500 kant-stiplet' id = 'Midlertidig' >Dette er Tailwind CSS< / tekstområde >
< / legeme >
< stil type = 'tekst/css' >
#Midlertidig {
baggrund-klip: border-box;
}
@ medier ( max- bredde :500px ) {
#Midlertidig {
baggrundsklip: polstringsboks;
} }
< / stil >
< / html >

I dette kodestykke:

  • Gentag metoderne til at inkorporere Tailwind CDN-stien og oprette '