Opacitets- och färgmodifierare

CSS-egenskapen opacity styr ett elements övergripande transparens, från 0 (osynligt) till 1 (helt ogenomskinligt). Det viktiga att förstå är att opacity ärvs av underordnade element: om ni anger opacity: 0.5 på ett kort blir även texten, bilderna och knapparna 50 procent transparenta. Det är ofta inte vad ni vill — vanligtvis behöver bara bakgrunden vara transparent, inte innehållet.

Tailwind mappar verktyg för opacity-* till CSS-värden för opacity. Tillgängliga steg omfattar opacity-0, opacity-5, opacity-10, opacity-25, opacity-50, opacity-75, opacity-90, opacity-95 och opacity-100. Dessa är användbara för inaktiverade tillstånd, toningar vid hovring och överlagringselement där ni medvetet vill att hela elementet ska vara halvtransparent.

Tailwind v3 introducerade opacitetsmodifieraren med snedstreck, som tillämpar opacitet direkt på ett färgvärde utan att påverka underordnade element. Skriv bg-blue-600/50 för att ange bakgrunden till blue-600 med 50 procents opacitet — endast bakgrunden blir transparent, medan text och underordnade element förblir helt ogenomskinliga. Detta är det rekommenderade sättet att skapa halvtransparenta färgade ytor.

Modifieraren med snedstreck accepterar alla värden från 0 till 100 i steg om 5: /0, /5, /10, /20, /25, /30, /40, /50, /60, /70, /75, /80, /90, /95, /100. Ni kan också använda godtyckliga värden, till exempel /[33] för exakt 33 procents opacitet. Modifieraren fungerar med alla färgverktyg: bg-*, text-*, border-*, ring-* och shadow-*.

Modifieraren med snedstreck på verktyg för text-* skapar halvtransparent text utan en separat opacitetsklass. text-gray-900/50 återger den nästan svarta färgen med 50 procents opacitet, vilket skapar en dämpad effekt. Detta används ofta för platshållartext, sekundära etiketter och inaktiverad text som ska se blekare ut snarare än ha en annan färg.

Använd modifieraren med snedstreck på kantfärger för halvtransparenta kanter: border-gray-900/10 skapar en mycket diskret kant som fungerar på både ljusa och mörka bakgrunder. Tekniken är populär för avdelare och kortkanter där en helt ogenomskinlig kant skulle bli för skarp. Kombinera med dark:-varianter för automatisk anpassning till temat.

Kombinera bg-white/80 med backdrop-blur-md för att skapa en frostad glaseffekt — ett halvtransparent element med en suddig vy av det som finns bakom. Det här moderna användargränssnittsmönstret används i klistrade navigeringsfält, flytande paneler och notisfält. Verktygen backdrop-blur-* använder CSS-egenskapen backdrop-filter.

Modala dialogrutor och utdragsmenyer behöver vanligtvis en halvtransparent bakgrundsöverlagring bakom sig. Klassen bg-gray-900/50 skapar den vanliga mörka överlagringen. Genom att använda modifieraren med snedstreck i stället för opacity-50 blir överlagringens egen bakgrund halvtransparent, samtidigt som den fortfarande fångar upp klick och förhindrar interaktion med innehållet bakom.

Använd hover:opacity-* för att tona element vid hovring. Om ni använder opacity-100 hover:opacity-75 blir ett element något mörkare när pekaren hålls över det, vilket ger taktil återkoppling utan färgändring. Det är diskret och elegant för bildöverlagringar, kortens hovringstillstånd och galleriobjekt där ni vill ge en visuell respons utan en kraftig färgförändring.

Modifieraren med snedstreck fungerar även med ring-* som fokusindikatorer. ring-indigo-500/50 skapar en halvtransparent fokusring som syns utan att bli störande. Det är särskilt användbart i mörkt läge, där en helt ogenomskinlig ring kan se skarp ut. Kombinera med focus-visible: för att visa ringen endast när den behövs vid tangentbordsnavigering.

När de fördefinierade opacitetsstegen (5, 10, 25, 50, 75, 100) inte uppfyller era behov kan ni använda godtyckliga värden med hakparenteser: bg-blue-600/[33] tillämpar exakt 33 procents opacitet. Godtyckliga värden ger er pixelperfekt kontroll för designspecifikationer som kräver ovanliga transparensvärden, men genom att hålla er till de fördefinierade stegen får ni vanligtvis en mer enhetlig design.

I den här lektionen lärde ni er att verktyg för opacity-* påverkar hela elementet och dess underordnade element, att modifieraren med snedstreck (bg-color/opacity) gör endast färgegenskapen transparent medan underordnade element förblir ogenomskinliga samt att backdrop-blur-md tillsammans med bg-white/80 skapar en frostad glaseffekt. Nästa steg är att styra bakgrundsbilders storlek, position och upprepningsmönster.