A legfontosabb dolog az, hogy adjon meg egy képet a számítógépén vagy a telefonján, majd kattintson az OK gombra az oldal alján. Alapértelmezés szerint a kép sima hátterét átlátszóra cseréli. Az eredeti kép háttérszíne automatikusan meghatározásra kerül, csak a beállításoknál kell megadni, hogy milyen színre cserélje ki. A csere minőségét befolyásoló fő paraméter a „csere intenzitása”, amely képenként eltérő lehet.
Példa egy rózsaszín rózsa fényképére változtatás nélkül, miután a szilárd hátteret átlátszóra, fehérre és zöldre cserélték:
Első példaátlátszó alapon rózsavirággal a következő beállításokkal készül:
1) Csere intenzitása - 38;
2) A szélek körüli simítás - 5;
3) Cserélje ki a szilárd hátteret átlátszóra;
4) Vágás (<0) или Добавление (>0) a szélek mentén - "-70";
5) Invert – letiltva (nincs bejelölve).
Az alkotáshoz második példa, fehér háttérrel, ugyanazokat a beállításokat használtuk, mint az első példában, kivéve a paramétert: "Cserélje ki a sima hátteret" - fehér. BAN BEN harmadik példa, zöld háttérrel, a beállításokat is használják, mint az első példában, kivéve a paramétert: "szín hexadecimális formátumban" - #245a2d.
Az eredeti kép semmilyen módon nem változott. Egy másik feldolgozott képet kap átlátszó háttérrel vagy az Ön által megadott háttérrel.
Egyes esetekben, például egy oldal tervezése során olyan helyzetbe kerülhet, hogy a kép háttere semmiben sem egyezik magának az oldalnak a színével. A kézenfekvő megoldás az, hogy ezt a hátteret átlátszóvá tesszük.
Szükséged lesz
Utasítás
Hogyan lehet átlátszó színt beállítani css-ben? Ennek jelenleg 3 módja van.
1. módszer - átlátszó érték
Ha a szöveget vagy a háttérszínt átlátszóra állítja, a szín teljesen átlátszó, azaz láthatatlan lesz. Példa:
szín: átlátszó;
Az ilyen szöveg nem lesz látható az oldalon.
2. módszer – rgba színmód
Ez pedig már egy innováció css3. Korábban a webfejlesztésben nem volt ilyen mód, csak rgb volt. Biztosan tudja, hogyan kell színt írni ebben a formátumban. Ehhez három értéket kell megadnia zárójelben 0 és 255 között, jelezve a három elsődleges szín (piros, zöld, kék) egyikének telítettségét. Például:
Háttér: rgb(230, 121, 156);
Az rgba formátum nem különbözik egymástól, csak egy negyedik érték kerül hozzáadásra - az elem átlátszóságának foka 0-tól 1-ig. Általában ezt a jelölési formátumot főként félig átlátszó szín beállítására használják, és nem teljesen átlátszónak. A teljes átláthatóság eléréséhez csak 0-t kell beírnia negyedik értékként.
Háttér: rgba(0, 0, 0, 0);
Ebben az esetben a fennmaradó 3 számjegy nem játszik különösebb szerepet.
Átlátszó szín állítható be, ha a negyedik paraméter értéke 0,01 és 0,99 között van. O már írt egy keveset a háttér áttetszőségének beállításáról -ban, ha érdekel, elolvashatod.
3. módszer – átlátszatlanság
Egy másik tulajdonság a css3 technológiából. De azonnal szeretném figyelmeztetni, hogy ez egy kicsit másképp működik. Opacitás esetén az átlátszóság a teljes blokkra van beállítva, amelyre alkalmazzák. Így romlik a szöveg olvashatósága, a képek érzékelése. Tehát értelmét látom, hogy a tulajdonságot csak olyan blokkoknál használjuk, amelyekben nincs szöveg és néhány egyéb információ. Az értékek 0 és 1 között állíthatók be, mint a negyedik paraméter esetében, amikor színt adunk meg rgba formátumban.
Általában be Ebben a pillanatban Ez mind az általam ismert mód az átlátszó szín beállítására a css-ben. Hogy miért van erre szükség, az egy másik kérdés. Keresztül átlátszó háttér láthatod mi van alatta. Néha ezt a tervezéssel így kell megtenni. Általánosságban elmondható, hogy ma nagyon elterjedt az áttetsző módszer.
Átlátszó háttér (háttér)
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 való kép feltöltését.
Á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 szinte ugyanaz, csak még egy paramétert adunk hozzá - az átláthatóságot. Í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 a három alapszín telítettségi értékét adjuk meg 0-tól 255-ig, ahol a 255 a legmagasabb telítettség. A negyedik paraméter az átláthatóságunk. Itt az érték 0-tól egyig van írva. 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ág átláthatóságát 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 a szövegre átlátszóság is alkalmazható, ami olvashatatlanná teszi azt.
Átlátszó háttér példa
Előnyök áttetsző háttér példával könnyen bemutatható. Például van egy általános oldal hátterünk. Így nézne ki a blokk, ha egyszínű fekete színt kapna:
És most állítsuk be ugyanazt a fekete színt a blokkhoz, de adjuk meg az rgba színformátumot használva, az utolsó értéket például 0,7-ben adjuk meg. Így fog kiderülni: 
Most a blokk háttere áttetsző, és rajta keresztül látható a háttérkép. Ez a kép és a háttér csak illusztráció. Amint Ön is tudja, a css-ben a háttér átlátszósága jól jöhet, ha egy beágyazott elem hátterét úgy kell megjeleníteni, hogy közben ne takarja el a többi rétegben található hátteret.
Magát a színt nem nehéz beállítani az rgba segítségével. 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 írásával milliónyi különböző színt kaphat, és az áttetszőség lehetővé teszi, hogy sokkal többet érjen el gyönyörű hatások az oldalhoz, ha szükséges.
Betöltés...