PNG bez tła ale w całości półprzeźroczysty - jak usunąć półprzeźroczystość?

Cześć koledzy!

Jakie działania należy podjąć aby obrazek PNG wyświetlić na stronie bez tła ale też nieprzeźroczysty?

Zapisuję PNG w IrfanView wybieram fajkę "Set Transparent Color" oraz "Save Transparency as Alpha Channel" i wówczas obrazek wyświetla się bez tła ale jest półprzeźroczysty.

Gdy przy zapisie ustawię "Set Transparent Color" a pominę fajkę "Save Transparency as Alpha Channel" to wówczas tak zapisany obrazek wyświetla się normalnie ale z tłem.

Jak prawidłowo zapisać png i wyświetlić go na stronie bez tła?

ps. na stronie mam w css dla body ustawione tło obrazkowe background-image: url("concrete7a.jpg"); i to tło przebija przez obrazki PNG

Gdy w Photoshopie ręcznie usunę tło i tak zapiszę PNG to wówczas na stronie wyświetla się tak jak powinien - bez tła i nieprzeźroczysty ale może da się to jakoś obejść zamiast przerabiać setki obrazków?

Tło obrazków oczywiście jest jednolicie białe.

Wszelkie sugestie mile widziane :)

https://stackoverflow.com/a/11115408

Możesz tą komendę zastosować dla wszystkich obrazków.

Ja nie ogarniam shella na tyle, żeby na czysto z pliku *.bat/*.sh wykonać to polecenie dla wielu obrazków.

Ale w Pythonie bym napisał skrypt, który robi listę plików w podkatalogach, i obrazki z tej listy konwertuje na png z przezroczystym tłem.

Kiedyś się robiło takie maski, np. różowy kolor był interpretowany jako transparent, jak masz kolory red, green, blue i czwarty alpha, to ten alpha jest używany do blendowania kolorów.

Przykładowo masz jakiś kolor red background i nakładasz na to obrazek z alpha 20% green, to robisz blendowanie za pomocą linear extrapolation na vektorze.
new = bg * alpha + (1-alpha)* fg
kombinacją bez alpha kanału nie byłbyś w stanie policzyć jak wymieszać kolory żeby uzyskać dany stopień przezroczystości, jeśli obrazek będzie miał alpha 255, czyli 1.0 jak sobie znormalizujesz to przy 100% przezroczystości zostaje ci sam background, a przy 0% całkowicie pokrywa go foreground.
Oczywiście każdy pixel może mieć inną wartość alpha.

Mając obrazek bez alpha musisz nakładać maski binarne na kolor, ale lepiej jeśli ten kolor nie był nigdzie więcej w tym obrazku użyty poza oznaczeniem transparentności, bo powstają inne komplikacje.

Dzięki za chęć pomocy. Wycinanie tła czy nakładanie maski ok ale jaki sens ma w takim razie zapisywanie png i wybieranie koloru tła? Czy to nie ma działać tak że później to jednolite tło np. białe właśnie mogę wyłączyć bez dodatkowych zabiegów? W moim przypadku tło jest jednolicie białe a treść obrazka kontrastowo się odcina ale mimo to przy wyświetlaniu to białe tło jest nadal widoczne. Znika jak zapiszę dodatkowo z alpha no ale wtedy jest ta półprzeźroczystość całości (nawet nie pół tylko jakiś nieduży procent)

Spróbuj wrzucić jakiś przykład na forum jak to wygląda na stronie, bo mam wrażenie, że każdy zrozumiał Twój problem jakoś inaczej.

Okazało się że problem jest innego rodzaju. Stworzyłem stronkę link z dwoma obrazkami png zapisanymi, pierwszy: przeźroczystość + alpha , drugi: sama przeźroczystość i pierwszy wyświetla się jako prześwitujący ale drugi dokładnie tak jak powinien czyli poprawnie (bez tła i nieprześwitujący).

Problem mam na stronie sklepu który tworzę link - na stronie głównej pierwszy z lewej na dole jest zapisany z przeźroczystym tłem, a pozostałe z przeźroczystym tłem i dodatkowo aplha. Jest to darmowy opencart wersja 3.0.3.8 i z tego co zacząłem szukać to on ma jakieś z tym problemy ale niby to było w poprzednich wersjach i teraz już jest ok. Chyba miało to związek z cache. Na tej mojej testowej stronce wyświetlam po prostu png i jest ok, a czemu w sklepie nie jest to nie nie wiem.

Wiem trochę więcej... Problemem jest to że plik png utworzony w cache'u nie ma zapisywanej przeźroczystości i przy wyświetlaniu znowu ma tło.
Cache tworzą jakieś biblioteki php tylko jakie? i Czy da się zrobić aby zapisywały przeźroczystość?
Na serverze nginx mam włączony cache FastCGI.

Mówimy o tym obrazku na stronie, tak?

Z wyłączeniem cache'a na serwerze nie pomogę, ale sam obrazek możesz zmienić za pomocą CSS'a. Jeśli dodamy właściwość mix-blend-mode

.product-thumb .image img {
  mix-blend-mode: multiply;
}

to się nam elegancko kasuje białe tło z obrazka. Wtedy nie musisz się bawić w jakieś programy graficzne, ani dodatkowe skrypty i ręcznie tego edytować przy każdym zdjęciu.

Przed chwilą napisałem że problem rozwiązany ale skasowałem... Ponieważ tła nie ma ale przyjrzyj się dokładnie a można zobaczyć że obrazek stał się trochę przeźroczysty właśnie i przebija przez niego tło - tak jak u mnie wcześniej po zapisaniu z alpha.

Ideałem byłoby jakby przy usuwaniu tła w css można było ustawić opcję "sąsiadujące pixele" jak to można zrobić w programach graficznych. Wówczas środek zostałby w oryginale ale aż takich "cudów" robionych z automatu to chyba nie ma?

Dodałem jeszcze jeden obrazek na stronie testowej który jest zapisany tylko z przeźroczystością i jak widać tło jednak nie jest jednolicie białe (ponieważ tam gdzie jest białe to przeźroczystość też jest). Css robi dobrą robotę skoro takie niejednolite tło wycina, a te drobne minusy z przeźroczystością są do zaakceptowania bo raczej nie da się nic z tym zrobić.

Sylwek Kajor napisał(a):

Ideałem byłoby jakby przy usuwaniu tła w css można było ustawić opcję "sąsiadujące pixele" jak to można zrobić w programach graficznych. Wówczas środek zostałby w oryginale ale aż takich "cudów" robionych z automatu to chyba nie ma?

Aż tak bardzo tym manipulować raczej nie można, bo jak sprawdzałem w internecie to efekt zawsze się nakładał na cały obrazek.

Sylwek Kajor napisał(a):

Css robi dobrą robotę skoro takie niejednolite tło wycina, a te drobne minusy z przeźroczystością są do zaakceptowania bo raczej nie da się nic z tym zrobić.

To znaczy można wyedytować to w programie graficznym tylko pewnie każde zdjęcie z osobna, a jest ich całkiem sporo.
Jak wejdziesz w devtoolsy (klawisz F12, potem musisz znaleźć znacznik img) to na stronie niektóre obrazki są całkowicie przezroczyste, więc przez to tworzy się taki efekt jak opisujesz.

Musiałbyś mieć zdjęcie bez przezroczystości, wyedytować je jeszcze raz, ale w taki sposób, żeby przezroczystości nałożyć jedynie na same tło, a te drzwiczki, szyba (nie wiem co to jest) wewnątrz kominka miała swój naturalny biały kolor.

Ten obrazek w ogóle został zrobiony w bardzo dziwny sposób:

W Gimpie wydobyłem kanał alfa zrobiłem inwersje i okazało się, że grafik albo jakieś narzędzie potraktował oryginalny render w taki sposób, że został skonwertowany do skali szarości, kolory zostały odwrócone (255-color) i zapisane do kanału alfa.

Na samym dole pomazałem trochę po alfie i tak ona powinna mniej więcej wyglądać, ale RGB nie wygląda zachęcająco. Wygląda jak zdjęcie HDR zrobione włączonemu piecowi a potem po konwersji do 8bit jasne/gorące elementy przytłumiły blachy pomalowane na czarno.

Poniżej efekt po przeniesieniu zanegowanej alfy do RGB i zamalowaniu kanału alfa w miejscu gdzie jest piec.

Plik ogólnie jest do poprawki i powinien wrócić do grafika.