Sziasztok. Amint azt bizonyára tudja, a háttér egy CSS-tulajdonság, amely lehetővé teszi a háttérszín beállítását vagy a háttérként szolgáló kép betöltését. A CSS3 bevezette a lineáris és radiális színátmenetek létrehozásának lehetőségét is, de ez egy másik cikk témája. Ebben azt szerettem volna elmondani, hogyan állítsd be az átláthatóságot a háttértulajdonsághoz a CSS-ben.

Állítsa be az átlátszóságot a css háttérhez

Tehát mindez nagyon egyszerűen megtörténik egy olyan színes felvételi formátumnak köszönhetően, mint az rgba. Ha együtt dolgozik grafikus szerkesztők, akkor valószínűleg tudja, hogy az rgb színmód a következőket jelenti: a piros (piros), a zöld (zöld) és a kék (kék) arányát. Tehát az rgba gyakorlatilag ugyanaz, csak még egy paraméter van hozzáadva - az átlátszóság. Így van írva:

Háttérszín: rgba(173, 57, 22, 0,5)

Először is kifejezetten jelezzük, hogy a színt rgba módban állítjuk be. Ezután megadjuk a három alapszín telítettségi értékét 0 és 255 között, ahol a 255 a legmagasabb telítettség. A negyedik paraméter az átláthatóságunk. Ide írjuk a 0 és egy közötti értéket. Az 1 egy teljesen átlátszatlan elem, a 0 pedig egy teljesen átlátszó elem. Ennek megfelelően, ha 0-ra állítja, akkor a háttérszín egyáltalán nem lesz látható.

Most már tudja, hogyan állíthatja be a háttértulajdonságot átlátszóságra a CSS-ben. Ehhez az rgba színmódot kell használnia. Van egy átlátszatlansági tulajdonság is, de ez a teljes elem egészére vonatkozik. Vagyis az átlátszatlanság alkalmazásakor átlátszóságot lehet alkalmazni a szövegre, így olvashatatlanná válik.

Átlátszó háttér példa

Az áttetsző háttér előnyeit egy példán könnyű bemutatni. Például van egy általános oldal hátterünk. Így nézne ki a blokk, ha egyszínű fekete színt kapna:

Most állítsuk be ugyanazt a fekete színt a blokkhoz, de adjuk meg az rgba színformátumot használva, például az utolsó értékként 0,7-et. Így fog kiderülni:
Most a blokk háttere látható rajta, és a háttérkép látható rajta. Ez a kép és a háttér csak példaként szolgál. Ahogy érted, be css háttér Az átlátszóság akkor lehet hasznos, ha azt szeretné, hogy egy beágyazott elem háttere átlátszódjon anélkül, hogy eltakarná a többi rétegen található hátteret.

Maga a szín beállítása az rgba segítségével nem nehéz. Mint már említettük, az első három betű a három alapszínt jelenti: piros, zöld és kék, vagy inkább ezek arányát (0-tól 255-ig). Különböző értékek beállításával milliónyi különböző színt kaphatunk, az áttetszőség pedig lehetővé teszi, hogy sokkal szebb effektusokat tudjunk kitalálni az oldalra, ha szükséges.

Háromféleképpen módosíthatja egy elem átlátszóságát a CSS-ben:
az átlátszatlanság tulajdonság használatával,
az rgba() függvény használatával,
a hsla() függvény használatával.

1. Átlátszatlanság tulajdonság

Az átlátszatlanság tulajdonság lehetővé teszi, hogy a weboldal bármely elemét részben vagy teljesen átlátszóvá tegye. Ez a tulajdonság megváltoztatja azoknak az elemeknek az átlátszóságát, amelyeknek van háttérképe (kép) vagy szín vagy színátmenet segítségével beállított háttér. Ha egy olyan elem, amelyre az átlátszatlanság tulajdonságot alkalmazzák, más elemeket is tartalmaz, akkor azok átlátszóságát is megváltoztatják.
Az opacitás tulajdonság 0 (teljesen átlátszó) és 1 (átlátszatlan) közötti értékeket fogad el, például:

H1 (szín: #CD6829;) div ( háttér: #CDD6DB; átlátszatlanság: .3; )
Rizs. 1. Az elemek átlátszósága az átlátszatlanság használatával

2. rgba() függvény

Az RGBA színmodell a szükséges arányok keverésével színtónust hoz létre piros, zöldÉs kék virágok, és alfa csatorna (alfa) felelős a színátlátszóság mértékéért. Az átlátszatlanság tulajdonságtól eltérően egy más elemeket tartalmazó blokk esetében az rgba() függvény csak a blokk átlátszatlanságát módosítja.

Rizs. 2. RGB színmodell h1 (szín: #CD6829;) div (háttér: rgba(205, 214, 219, 0,3);)
Rizs. 3. Elemek átlátszósága az rgba() függvény segítségével

3. hsla() függvény

A hsla() függvény, amelynek paraméterei jelentése tónus (színárnyalat), telítettség, fényességÉs alfa csatorna (alfa), áttetsző szín beállítását is lehetővé teszi.

A színárnyalatok százalékban vannak megadva a színkör megfelelő értékével. Maga a kör szektorokra van osztva, amelyek határán elsődleges színek találhatók:

0/360° - piros
60° - sárga
120° - zöld színű
180° - kék színű
240° - kék színű
270° - lila színű
300° - lila színű.

Szükséged lesz

• - Photoshop program
• - egy kép, amelynek áttetsző háttérrel kell rendelkeznie.
• - tudni, hogyan kell új réteget létrehozni
• - tudja használni a Kitöltés eszközt és alakzatokat rajzolni a Photoshopban

Utasítás

Kattintson duplán a képet tartalmazó fólia nevére, és a megjelenő mezőbe írja be a réteg új nevét. Ez azért szükséges, hogy ezt a réteget szabadon mozgassa és átlátszó hátteret kapjon a kép egyes részei eltávolításakor. Ha a képnek már van átlátszatlan, egységes háttere, akkor válassza ki a Varázspálca eszközzel. Ehhez válassza ki ezt az eszközt az eszköztárban, és kattintson a háttérszínre, majd a bezárt területen belül minden megadott színből (amelyre az egér kattintott) kijelölődik. Kattintással törölje a kijelölést Kulcs törlése.

Ha nem egyenletes, válassza ki magát a képet a „Reclinear” vagy a „Pen” eszközzel. Ha a Toll eszközzel választ ki egy képet, jelölje ki a kívánt útvonalat, és szükség esetén szerkessze a Toll+ eszközzel. Az eszközzel történő szerkesztés során a létrehozott útvonalra kattintva rögzítési pontokat adhat hozzá, és a pontok mozgatásával módosíthatja azt. Ezután anélkül, hogy eltávolítaná a kurzort az útvonalról, kattintson a jobb gombbal, és válassza a „Kijelölés létrehozása” lehetőséget. Állítsa a Feather értékét 0 képpontra, és jelölje be a Simítás opciót. Ezeknek a műveleteknek az eredményeként az elérési út kijelöléssé alakul. Törölje a kijelölést a Delete gomb megnyomásával.

Hozzon létre egy új réteget, és helyezze a képréteg alá. Vigye felette a kurzort, kattintson a bal egérgombbal, és a gomb elengedése nélkül vigye a kurzort a képet tartalmazó réteg alá. Ily módon egy új réteget húz a képréteg alá. Maga a kép alatt hozzon létre egy átlátszatlan hátteret a kívánt színnel és formával.

Elég gyakran találhat megfelelő képet az interneten, például beillesztheti egy webhelyre. Vagy talán kollázst készít, és másokat is hozzá kell adnia egy rajzhoz. De a szükséges képeknek általában van valamilyen háttere.

Találjuk ki, hogyan lehet készítsen átlátszó hátteret a képhez a szerkesztő segítségévelVályogtéglaPhotoshop. Az angol verziót telepítettem Adobe Photoshop CS5, úgyhogy megmutatom rajta.

Megpróbálok különféle gyorsbillentyű-kombinációkat biztosítani.

Ha még nincs telepítve a Photoshop, ritkán használod, vagy angol nyelvű, akkor a Paint.net-ben készíthetsz átlátszó hátteret. Ez egy egyszerű orosz nyelvű képszerkesztő, amely nem foglal sok helyet a merevlemezen. A linket követve elolvashatod részletes cikk. A Paint.net programot letöltheti weboldalunkról.

Először is nézzünk egy egyszerű példát. Tegyük fel, hogy van egy képe sima háttéren, ez lehet logó vagy valami neve. Ezt a logót vagy feliratot készítsük átlátszó háttérre Photoshopban.

Nyissa meg a kívánt képet a szerkesztőben. Most készítsünk átlátszó hátteret a réteghez. A „Rétegek” ablakban kattintson duplán a hozzáadott rétegre – egy lakat lesz vele szemben. Az ablak" Új réteg", kattintson az "OK" gombra. Ezt követően a zár eltűnik.

Válassza ki a „Varázspálca” eszközt. A tulajdonságsávban adja meg az érzékenységi szintet, állítson be különböző értékeket, hogy megértse, hogyan működik, például 20 és 100. A kép kijelölésének megszüntetéséhez nyomja meg a „Ctrl+D” billentyűket.

Állítsa be az érzékenységet, és kattintson a háttérre a varázspálcával. Ha a kiválasztott háttérhez hozzá szeretné adni azokat a részeket, amelyek nincsenek kiválasztva, tartsa lenyomva a „Shift” gombot, és folytassa a kijelölést. A kiválasztott területek törléséhez kattintson a „Törlés” gombra.

A háttér helyett most sakktábla van - ez azt jelenti, hogy sikerült átlátszóvá tenni a fehér hátteret. Kijelölés eltávolítása – „Ctrl+D”.

Ha van egy képe vagy fényképe, amelyen sok különböző szín és tárgy található, nézzük meg, hogyan készíthet átlátszó hátteret egy képhez a Photoshopban.

Ebben az esetben a Gyorskiválasztás eszközt fogjuk használni. Kattintson a varázspálcára a bal egérgombbal kis késéssel, és válassza ki a kívánt eszközt a menüből.

Most ki kell választanunk azt az objektumot, amelyet átlátszó háttéren szeretnénk hagyni. A tulajdonságsávban állítson be különböző méreteket, és kattintson az objektumra, és adjon hozzá területeket. Ha tévedésből egy szükségtelen hátteret választott ki, nyomja meg az „Alt” billentyűt, és távolítsa el.

Az eredmény megtekintéséhez nyomja meg a "Q" gombot. A kép azon részei, amelyek átlátszóvá válnak, rózsaszínnel lesznek kiemelve.

Másolja a kijelölt területeket a „Ctrl+C” billentyűkombinációval. Ezután létrehozunk új fájl, „Ctrl+N”, átlátszó háttérrel.

Illessze be a másolt töredékeket, „Ctrl + V”. Ha a háttérből szükségtelen részek maradtak rajtuk, távolítsa el őket a Radír eszközzel. Átlátszó háttérre készített képeket elmentjük ide PNG formátum vagy GIF.

Tegye átlátszóvá a kép fehér hátterét, vagy készítsen átlátszó hátteret egy színes kép vagy fénykép egyes töredékeihez a Photoshop alkalmazásban. Ezt követően szükség esetén használhatja őket: beillesztheti egy webhelyre, hozzáadhatja egy másik rajzhoz, vagy érdekes kollázsokat készíthet.

CSS háttér átláthatóság

A webhely hátterének átlátszósága a CSS-tulajdonságokon keresztül jön létre. Az átlátszóságot kétféleképpen érheti el: az opacity tulajdonságon és a background:rgba() tulajdonságon keresztül. Nézzük meg mindegyiket, majd végezzünk összehasonlítást.

1. CSS átlátszóság tulajdonság a háttérben való átlátszóság érdekében

A CSS rendelkezik az opacitás tulajdonsággal, amellyel beállítható a képek, szövegek, beleértve a háttereket is, átlátszósága.

Az átlátszóság egyszerűen megadható egy valós szám megadásával 0,0 és 1,0 között. Minél kisebb a szám, annál kevésbé lesz észrevehető az objektum.

átlátszatlanság: 0,5; // Átlátszóság átlátszatlansága: 0,2; // Az objektum csak 20%-os átlátszatlanságnál látható: 0,8; // Az objektum csak 80%-ban látható

Nézzünk egy példát az opacitás tulajdonsággal.

A szöveg is átlátszó