Photoshop, jak sprawić, by biały kolor był przezroczysty. Przezroczysty kolor i tło w CSS
Jak ustawić przezroczysty kolor w css? Obecnie są na to 3 sposoby.
Metoda 1 - przezroczysta wartość
Jeśli ustawisz kolor tekstu lub tła na przezroczysty , kolor będzie całkowicie przezroczysty, czyli niewidoczny. Przykład:
kolor:przezroczysty;
Taki tekst nie będzie widoczny na stronie.
Metoda 2 — tryb kolorów rgba
A to już jest innowacyjny css3. Wcześniej nie było takiego trybu w tworzeniu stron internetowych, był tylko rgb. Na pewno wiesz, jak napisać kolor w tym formacie. Aby to zrobić, musisz podać trzy wartości w nawiasach od 0 do 255, wskazując nasycenie jednego z trzech podstawowych kolorów (czerwony, zielony, niebieski). Na przykład:
Tło: rgb(230, 121, 156);
Format rgba nie różni się, dodaje się tylko czwartą wartość - stopień przezroczystości elementu od 0 do 1. Ogólnie ten format notacji służy głównie do ustawienia koloru półprzezroczystego, a nie całkowicie przezroczystego. Aby osiągnąć pełną przezroczystość, wystarczy wpisać 0 jako czwartą wartość.
Tło: rgba (0, 0, 0, 0);
W tym przypadku pozostałe 3 cyfry nie odgrywają szczególnej roli.
Kolor półprzezroczysty można ustawić, jeśli czwarty parametr jest ustawiony na wartość od 0,01 do 0,99. O pisałem już trochę o ustawianiu przezroczystości dla tła w , możesz to przeczytać, jeśli jesteś zainteresowany.
Metoda 3 - krycie
Kolejna właściwość z technologii CSS3. Ale chcę Cię od razu ostrzec, że działa to trochę inaczej. W przypadku krycia przezroczystość jest ustawiana na cały blok, do którego została zastosowana. W ten sposób pogarsza się czytelność tekstu i odbiór obrazów. Widzę więc sens w używaniu tej właściwości tylko do bloków, w których nie ma tekstu i kilku innych informacji. Wartości można ustawić od 0 do 1, tak jak w przypadku czwartego parametru przy określaniu koloru w formacie rgba.
Ogólnie rzecz biorąc, wł ten moment to są wszystkie znane mi sposoby ustawiania przezroczystego koloru w css. Dlaczego jest to konieczne, to inna kwestia. Przez przezroczyste tło widać to, co jest pod nim. Czasami trzeba to zrobić w ten sposób zgodnie z projektem. Ogólnie technika z przeziernością jest dziś bardzo powszechna.
Przezroczyste tło (tło)
Jak być może wiesz, background to właściwość CSS, która pozwala ustawić kolor tła lub przesłać obraz, który będzie działał jako tło.
Ustaw przezroczystość dla tła css
Wszystko to odbywa się więc bardzo prosto dzięki takiemu formatowi nagrywania kolorów jak rgba . Jeśli pracujesz z edytory graficzne, to prawdopodobnie wiesz, że tryb kolorów rgb jest dekodowany w następujący sposób: proporcja czerwonego (czerwonego), proporcja zielonego (zielonego) i niebieskiego (niebieskiego). Tak więc rgba jest prawie taka sama, dodawany jest tylko jeden parametr - przezroczystość. Jest napisane tak:
Kolor tła: rgba (173, 57, 22, 0,5)
Po pierwsze, wyraźnie wskazujemy, że ustawiamy kolor w trybie rgba. Następnie wskazujemy wartości nasycenia trzech kolorów podstawowych od 0 do 255, gdzie 255 to najwyższe nasycenie. Czwartym parametrem jest nasza przejrzystość. Tutaj wartość jest zapisywana od 0 do jeden. 1 to w pełni nieprzezroczysty element, a 0 to w pełni przezroczysty element. W związku z tym, jeśli ustawisz go na 0, kolor tła nie będzie w ogóle widoczny.
Teraz wiesz, jak ustawić przezroczystość dla właściwości tła w css. Aby to zrobić, musisz użyć trybu kolorów rgba. Istnieje również właściwość opacity, ale dotyczy ona całego elementu jako całości. Oznacza to, że podczas stosowania nieprzezroczystości można również zastosować przezroczystość do tekstu, co sprawi, że będzie on nieczytelny.
Przykład przezroczystego tła
Korzyści płynące z półprzezroczystego tła można łatwo pokazać na przykładzie. Na przykład mamy ogólne tło strony. Tak wyglądałby blok, gdyby nadano mu jednolity czarny kolor:
A teraz ustawmy ten sam czarny kolor dla bloku, ale określmy go za pomocą formatu koloru rgba, określając na przykład ostatnią wartość jako 0,7. Wyjdzie tak: 
Teraz tło bloku jest przezroczyste, a obraz tła jest przez niego widoczny. Ten obrazek i tło służą wyłącznie do celów ilustracyjnych. Jak rozumiesz, w CSS przezroczystość tła może się przydać, gdy chcesz, aby tło zagnieżdżonego elementu było widoczne bez zasłaniania innych teł znajdujących się na innych warstwach.
Ustaw kolor za pomocą RGB nietrudne. Jak już wspomniano, pierwsze trzy litery oznaczają trzy podstawowe kolory: czerwony, zielony i niebieski, a raczej ich udział (od 0 do 255). Wprowadzając różne wartości można uzyskać miliony różnych kolorów, a przezroczystość pozwoli w razie potrzeby wymyślić wiele pięknych efektów dla witryny.
W niektórych przypadkach, na przykład podczas projektowania witryny, możesz spotkać się z sytuacją, w której tło obrazu w żaden sposób nie pasuje do koloru samej witryny. Oczywistym rozwiązaniem jest uczynienie tego tła przezroczystym.
Będziesz potrzebować
Instrukcja
Najważniejszą rzeczą jest określenie obrazu na komputerze lub telefonie, a następnie kliknięcie przycisku OK na dole tej strony. Domyślnie zwykłe tło obrazu jest zastępowane przezroczystym. Kolor tła oryginalnego obrazu jest określany automatycznie, wystarczy określić w ustawieniach, jakim kolorem go zastąpić. Głównym parametrem mającym wpływ na jakość wymiany jest „Intensywność wymiany” i może on być inny dla każdego zdjęcia.
Przykładowe zdjęcie różowej róży bez zmian i po zastąpieniu jednolitego tła przezroczystym, białym i zielonym:
Pierwszy przykład z kwiatem róży na przezroczystym tle wykonujemy z następującymi ustawieniami:
1) Intensywność wymiany - 38;
2) Wygładzanie na brzegach - 5;
3) Zamień stałe tło na przezroczyste;
4) Kadrowanie (<0) или Добавление (>0) wzdłuż krawędzi - „-70”;
5) Odwróć - wyłączone (zaznacz niezaznaczone).
Do tworzenia drugi przykład, z białym tłem, zastosowano te same ustawienia, co w pierwszym przykładzie, z wyjątkiem parametru: „Zamień zwykłe tło na” - biały. V trzeci przykład, Z zielone tło, stosowane są również ustawienia, jak w pierwszym przykładzie, z wyjątkiem parametru: "kolor w formacie szesnastkowym" - #245a2d.
Oryginalny obraz nie jest w żaden sposób zmieniany. Otrzymasz kolejny przetworzony obraz z przezroczystym tłem lub tłem, które określisz.
