Kako uporabljati prelomne točke in medijske poizvedbe s posnetkom ozadja v Tailwindu

Kako Uporabljati Prelomne Tocke In Medijske Poizvedbe S Posnetkom Ozadja V Tailwindu



Med ustvarjanjem različnih odsekov na spletni strani lahko pride do scenarijev, ko mora programer izrezati ozadje ali ga spremeniti, da nabere vsebino. Ta metodologija je v pomoč pri učinkovitem upravljanju priložene vsebine in oblikovanju različnih odsekov strani.

Ta blog podrobneje obravnava naslednje ključne koncepte:

Kako uporabljati/uporabljati prekinitvene točke in medijske poizvedbe s posnetkom ozadja v Tailwindu?

' bg-posnetek-{ključna beseda} ” se uporablja za nastavitev omejevalnega polja ozadja elementa. Ta pripomoček se lahko uporablja z več lastnostmi, kot je » škatla za oblazinjenje ', ' border-box ', ' content-box «, in » besedilno polje ”.





Primer 1: Uporaba prelomnih točk s posnetkom ozadja v Tailwind

Ta primer uporablja prelomne točke s posnetkom ozadja prek uporabljenega ' bg-posnetek-{ključna beseda} »pripomoček z« md “, tj. srednje veliki zasloni in “ lg ”, tj. razredi velikih zaslonov:




< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< scenarij src = 'https://cdn.tailwindcss.com' >< / scenarij >
< / glavo >
< telo >
< textarea razred = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > To je Tailwind CSS < / textarea >
< / telo >
< / html >

Glede na te vrstice kode:



  • Najprej določite pot CDN za uporabo funkcij Tailwind.
  • Nato naredite element “