Hogyan készítsünk áttetsző CSS blokkot

Hogyan lehet áttetsző háttér a CSS-ben

A szerzőtől: Üdvözöljük a blogunkban a helyszíni építési és webes technológiákra. Különösen ma is beszélünk arról, hogyan lehet áttetsző háttér CSS-ben, és miért szükséges lehet.

Átlátszóság a webes tervezésben

A közelmúltban az átlátszósággal kapcsolatos különböző technikákat aktívan használják a helyszínen. Ez lehetővé teszi, hogy gyönyörű webhelyeket és sok különböző dekoratív elemet hozzon létre. A PNG formátumnak köszönhetően képes a weboldal különböző formáinak áttetsző képeinek beillesztésére.

És mit terveznek a CSS-ben az áttetsző hátterek használatához? Az utóbbi években lehetősége van meghatározni a szöveg színét vagy a hátsó tervet az RGBA színmódban. Ha grafikus szerkesztőként dolgozik, valószínűleg tud róla. Az RGBA színe így van meghatározva:

Háttér: RGBA (dollyeran, kotrófák, dolly, átláthatóság)

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

Az első három értéket 0-tól számított numerikus értékek rögzítik, ahol – a szín legnagyobb része. Az átláthatóságot más módon határozzák meg – 0-ról 1-re. Ha 0-at írsz, akkor a hatás ugyanaz lesz, mint a háttér: átlátszó, vagyis teljesen átlátszó háttér.

Miért kell mindez, amire szüksége van

Nos, képzeld el, hogy az egész weboldalra vagy egy külön blokkra van meghatározva valamilyen háttérkép. Ezután, ha új blokkokat hoz létre ebben a szülőtartályban, akkor az árnyék meghatározása után a kép nem lesz látható az oldal ezen területeiben.

Ha szüksége van a legfontosabb szilárd színre, és az RGBA színmódja rajta látható, akkor ezt használják. Például két blokkot hozok létre önkényes azonosítókkal a HTML-dokumentumban.

Div id = “ab” / divdiv id = “ct” / div

Háttér: RGB (,,13) Háttér: URL (Hab)

A blokkok megegyeznek egymással mindent, kivéve a hátteret. Az abszolút pozícionálásnak köszönhetően ugyanazon a helyen állnak – az oldal bal felső sarkában, de mivel a retesz a HTML-jelölésben van, teljesen átfedi az elvtársát és az oldalon egyszerűen egy sárga szilárd háttér.

Ugyanakkor látjuk, hogy a #AB-nak van valami háttérkép, de nem fogjuk látni őt, akkor a #c nem áttetsző háttér, és semmi sem ragyog. Mindent, mert az RGB módban beállítottuk a színt, és nem adunk át áttetszést, amit ebben az esetben szükségünk van rá. Változtassuk meg a stílust a #CT:

Háttér: RGBA (,,3,).

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

Frissítjük az oldalt, és látjuk, hogy egy szilárd sárga árnyékot, és a csillagokat rajta keresztül látják, amelyek a #AB blokkunk háttérképe volt. Ez az RGBA mód működése.

Most szórjunk egy másik példát. Távolítsa el az egyik blokkot, és a fennmaradó bennünket olyan gyermekelemet hozzunk létre, amely szintén kinevezi a stílusokat.

Div osztály = “blokk”

Cent A gyermekelem, adjuk meg a háttérképet a fő tartályhoz és a kívánt kelhez a blokk belsejében. Ismét az áttetszőség hiánya miatt a szülő háttere nem változik.

Most elég ahhoz, hogy meghatározza a megfelelő árnyalatot, amely hasonló lenne a rózsaszín (rózsaszín), csak írja be RGBA módban, adja hozzá a legújabb átlátszó értéket. A gyermekelem háttérszínének felülbírálása:

Háttér: RGBA (,,,);

Most, ha frissíti az oldalt, azt látjuk, hogy egy gyönyörű dísz látható a gyermekegység színén keresztül, amely egy közös tartályhoz van beállítva.

Ahol a helyszínen hasznos lehet?

Nos, áttetsző áttetszővel szétszedve, és ahol általánosan alkalmazzuk? Általában az úgynevezett különböző képek, menüelemek vagy áruk létrehozásakor használják.

Bizonyára láttál Egyes oldalakon, például, ha lebeg egy elemet, egy másik háttér néhány tartalmát rá kiszabott. De ugyanakkor, ha a kiszabott háttér színe átlátszatlan, akkor nem fogjuk látni az előző képet. Ennek megfelelően nem jó bárhol, ezért az áttetsző színt használják, amely az RGBA használatával van megadva.

Egy másik példa a használatra lehet az, amit láthatott. A fő tartály gyönyörű háttérkép volt. Ennek megfelelően, hogy ez a dísz látható, és a gyermekelemek háttérszínén keresztül is szükség van az RGBA-ban is.

Nos, hogyan lehet teljesen átlátszó hátteret készíteni a CSS-ben? Fent írtam, hogy lehet írni a Háttér: Átlátszó tulajdonság ez, vagy 0-ra állítja a negyedik érték rögzítésekor színek RGBA módban. Tovább vétel felvenni a fedettség ingatlan egységet, amelynek értéke 0, de aztán az egész blokkot átlátszó lesz, azaz a láthatatlan.

További információt a CSS3 tanfolyamunkról, ahol van egy megfelelő lecke az átláthatóságra és az átlátszó tulajdonságra. Lásd és megtudja, hogy még mindig jobban kitalálja ezeket a tulajdonságokat. Befejeztem ezt a cikket, és sikert kívánok a webes technológiák tanulásában. Maradjon a Webformysels-szel, hogy még többet megtudjon.

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

PSD HTML-re

Helyszíni elrendezés a HTML5 és a CSS3-on a semmiből

Néz

Címkék: webhely elrendezése

Hasonló cikkek: