Peittävyys- ja värimuunnokset
Käyttäkää vinoviivallista peittävyysmuunnossyntaksia, kuten bg-blue-500/50, taustojen ja tekstin läpinäkyvyyden säätämiseen.
Peittävyys- ja värimuunnokset on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
CSS:n opacity-ominaisuus
CSS:n opacity hallitsee elementin yleistä läpinäkyvyyttä välillä 0 (näkymätön) ja 1 (täysin peittävä). On tärkeää ymmärtää, että opacity periytyy lapsielementeille: arvon opacity: 0.5 asettaminen kortille tekee myös sen tekstistä, kuvista ja painikkeista 50-prosenttisesti läpinäkyviä. Tämä ei usein ole toivottua — yleensä vain taustan tarvitsee olla läpinäkyvä, ei sisällön.
<!-- opacity affects EVERYTHING including children -->
<div class="opacity-50 bg-blue-600 p-6">
<p class="text-white">This text is also 50% transparent (probably not intended)</p>
</div>Tailwindin opacity-*-apuluokat
Tailwind yhdistää opacity-*-apuluokat CSS:n opacity-arvoihin. Käytettävissä olevia tasoja ovat esimerkiksi opacity-0, opacity-5, opacity-10, opacity-25, opacity-50, opacity-75, opacity-90, opacity-95 ja opacity-100. Ne ovat hyödyllisiä käytöstä poistetuissa tiloissa, hover-häivytyksissä ja peittokerroksissa, joissa koko elementin halutaan tarkoituksella olevan puoliläpinäkyvä.
<!-- Disabled button with reduced opacity -->
<button class="bg-indigo-600 text-white px-6 py-2 rounded opacity-50 cursor-not-allowed">
Disabled
</button>
<!-- Loading overlay -->
<div class="fixed inset-0 bg-white opacity-75"></div>Värimuunnin (vinoviivasyntaksi)
Tailwind v3 esitteli vinoviivalla kirjoitettavan läpinäkyvyysmuuntimen, joka lisää läpinäkyvyyden suoraan väriarvoon vaikuttamatta lapsielementteihin. Kirjoittamalla bg-blue-600/50 taustaksi asetetaan blue-600 50 prosentin läpinäkyvyydellä — vain tausta on läpinäkyvä, kun taas teksti ja lapsielementit pysyvät täysin peittävinä. Tämä on suositeltu tapa luoda läpikuultavia väripintoja.
<!-- Slash modifier: only the background is transparent -->
<div class="bg-blue-600/20 p-6 rounded-xl">
<p class="text-blue-900 font-medium">This text stays fully opaque at 100% opacity</p>
</div>
<!-- Compared to element-level opacity: -->
<div class="bg-blue-600 opacity-20 p-6 rounded-xl">
<p class="text-white">Text is also transparent here — probably wrong!</p>
</div>Käytettävissä olevat läpinäkyvyystasot
Vinoviivamuunnin hyväksyy arvot välillä 0–100 viiden yksikön välein: /0, /5, /10, /20, /25, /30, /40, /50, /60, /70, /75, /80, /90, /95 ja /100. Voitte käyttää myös mielivaltaisia arvoja, kuten /[33], täsmälleen 33 prosentin läpinäkyvyyteen. Muunnin toimii kaikissa väriapuohjelmissa: bg-*, text-*, border-*, ring-* ja shadow-*.
<div class="bg-indigo-500/10 p-2 mb-1">10% background</div>
<div class="bg-indigo-500/25 p-2 mb-1">25% background</div>
<div class="bg-indigo-500/50 p-2 mb-1">50% background</div>
<div class="bg-indigo-500/75 p-2 mb-1">75% background</div>
<div class="bg-indigo-500 p-2">100% background (default)</div>Tekstin läpinäkyvyys muuntimella
Vinoviivamuunnin text-*-apuohjelmissa luo puoliläpinäkyvän tekstin ilman erillistä opacity-luokkaa. text-gray-900/50 näyttää lähes mustan värin 50 prosentin läpinäkyvyydellä, mikä luo hillityn vaikutelman. Tätä käytetään usein paikkamerkkitekstissä, toissijaisissa otsakkeissa ja käytöstä poistetuissa teksteissä, joiden halutaan näyttää haalistuneilta eri värin sijaan.
<p class="text-gray-900">Full opacity text</p>
<p class="text-gray-900/75">75% opacity text</p>
<p class="text-gray-900/50">50% opacity text (secondary)</p>
<p class="text-gray-900/25">25% opacity text (subtle hint)</p>Reunuksen läpinäkyvyys muuntimella
Käyttäkää vinoviivamuunninta reunuksen väreissä läpikuultavien reunusten luomiseksi: border-gray-900/10 luo hyvin hienovaraisen reunuksen, joka toimii sekä vaaleilla että tummilla taustoilla. Tämä tekniikka sopii erityisesti jakajiin ja korttien reunuksiin, joissa täysin peittävä reunus olisi liian voimakas. Yhdistäkää se dark:-muunnelmiin, jotta teema mukautuu automaattisesti.
<div class="border border-gray-900/10 dark:border-white/10 rounded-xl p-6">
Card with a transparent border
</div>
<hr class="border-t border-gray-900/10 my-8" />Taustan sumennus ja huurrelasi
Yhdistäkää bg-white/80 ja backdrop-blur-md luodaksenne huurrelasiefektin — läpikuultavan elementin, jonka takana näkyvä näkymä on sumennettu. Tätä modernia käyttöliittymärakennetta käytetään kiinnitetyissä navigointipalkeissa, kelluvissa paneeleissa ja ilmoituslaatikoissa. backdrop-blur-*-apuohjelmat käyttävät CSS:n backdrop-filter-ominaisuutta.
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200/50 px-8 py-4">
<span class="text-xl font-bold">MyApp</span>
</nav>Peittokerroksen taustarakenn e
Modaaliset ikkunat ja laatikot tarvitsevat yleensä puoliläpinäkyvän taustan taakseen. Luokka bg-gray-900/50 luo tavallisen tumman peittokerroksen. Kun käytätte vinoviivamuunninta opacity-50-luokan sijaan, peittokerroksen oma tausta on puoliläpinäkyvä, mutta se vastaanottaa edelleen napsautukset ja estää taustalla olevan sisällön käytön.
<!-- Modal backdrop -->
<div class="fixed inset-0 bg-gray-900/50 z-40">
<!-- Clicking this closes the modal -->
</div>
<!-- Modal content appears above backdrop -->
<div class="fixed inset-0 flex items-center justify-center z-50">
<div class="bg-white rounded-2xl p-8 shadow-2xl w-full max-w-md">
Modal Content
</div>
</div>Hover-läpinäkyvyys-efektit
Käyttäkää hover:opacity-*-luokkia elementtien häivyttämiseen hover-tilassa. Kun käytätte yhdistelmää opacity-100 hover:opacity-75, elementti himmenee hieman osoittimen ollessa sen päällä. Tämä antaa tuntopalautetta ilman värin vaihtamista ja sopii hienovaraisesti kuva-peittokerroksiin, korttien hover-tiloihin ja gallerian kohteisiin, joissa haluatte visuaalisen vasteen ilman voimakasta värimuutosta.
<!-- Image gallery item with hover fade -->
<div class="group relative overflow-hidden rounded-xl">
<img src="photo.jpg"
class="w-full h-48 object-cover opacity-100 group-hover:opacity-75 transition-opacity duration-300"
alt="" />
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="text-white font-bold">View Photo</span>
</div>
</div>Ring-läpinäkyvyysmuunnin
Vinoviivamuunnin toimii myös ring-*-kohdistusilmaisimissa. ring-indigo-500/50 luo puoliläpinäkyvän kohdistusrenkaan, joka näkyy mutta ei häiritse. Tämä on erityisen hyödyllinen tummassa tilassa, jossa täysin peittävä rengas voi näyttää liian voimakkaalta. Yhdistäkää se focus-visible:-muunnelmaan, jotta rengas näkyy vain silloin, kun sitä tarvitaan näppäimistönavigointiin.
<input
type="text"
class="border border-gray-300 rounded-lg px-4 py-2
focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50
focus-visible:border-indigo-500"
placeholder="Email address"
/>Mielivaltaiset läpinäkyvyysarvot
Kun ennalta määritetyt läpinäkyvyystasot (5, 10, 25, 50, 75, 100) eivät riitä, käyttäkää mielivaltaisia arvoja hakasuljesyntaksilla: bg-blue-600/[33] käyttää täsmälleen 33 prosentin läpinäkyvyyttä. Mielivaltaiset arvot antavat pikselintarkan hallinnan suunnittelumäärityksiin, joissa tarvitaan epätavallisia läpinäkyvyysarvoja, mutta ennalta määritettyjen tasojen käyttäminen tuottaa yleensä yhtenäisemmän ulkoasun.
<!-- Arbitrary opacity value -->
<div class="bg-indigo-600/[15] p-4 rounded-lg">
Very subtle 15% indigo tint
</div>
<!-- Also works for element-level opacity -->
<div class="opacity-[33] text-gray-900">
33% transparent element
</div>Pikatesti
Testatkaa, kuinka hyvin ymmärrätte tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että opacity-*-apuohjelmat vaikuttavat koko elementtiin ja sen lapsielementteihin, vinoviivamuunnin (bg-color/opacity) tekee vain väriominaisuudesta läpinäkyvän, kun taas lapsielementit pysyvät peittävinä ja backdrop-blur-md yhdessä bg-white/80:n kanssa luo huurrelasiefektin. Seuraavaksi opimme hallitsemaan taustakuvien kokoa, sijaintia ja toistokuvioita.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Peittävyys- ja värimuunnokset” ilmainen?
Kyllä – oppitunnin ”Peittävyys- ja värimuunnokset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Peittävyys- ja värimuunnokset”?
Käyttäkää vinoviivallista peittävyysmuunnossyntaksia, kuten bg-blue-500/50, taustojen ja tekstin läpinäkyvyyden säätämiseen. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Peittävyys- ja värimuunnokset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tailwindin väripaletti
- Taustagradientit
- Peittävyys- ja värimuunnokset
- Taustan koko, sijainti ja toisto