Ostrość tła na grafice

0

Mam taki problem otóż w jednym miejscu mam do umieszczenia grafikę, która zawiera również tekst, musi ona być skalowalna względem rozdzielczości monitora, więc standardowo zastosowałem:

	background: url('../images/index/info.png') center center no-repeat;
	background-size:contain;

Wszystko ładnie pięknie tylko, że obraz łapie ostrość co kilka pixeli (patrząc przy zmianie rozdzielczości w widoku responsywnym) co niestety wygląda strasznie gdy akurat nie złapie ostrości. Próbowałem z grafiką svg ale nic nie pomogło (chyba, że konwertowanie png to svg nic nie zmienia i trzeba się bawić z surowym psd). Znacie jakiś inny sposób na to? Muszę napisać własny algorytm w js który by zajmował się zmianą wielkości obrazka czy jakoś inaczej da się to obejść?

0

czy to nie przypadkiem wina ze png masz zapisany jako interlaced?? nie wiem jaki wplyw ma to na skalowanie, ale przy pobieraniu interlaced png taki efekt wystepuje.

druga sprawa png to scg to bedzie tylko zmiana rozszerzenia ale wszystko psu o bude. jak z mp3 i wav. dane starcone i wsteczna konwersja nic tu nie da.

jedyna opcje to utworzenie svg za pomoca softu od zera.

0

@szalonyfacet To zwykły png. Po dodatkowych testach wychodzi na to, że to się dzieje tylko na firefoxe, co niestety nadal jest problemem. Napiszę jeszcze do grafika, żeby mi wygenerował svg z projektu, bo mam tylko pociętą grafikę.

0

SVG raczej nic nie zmieni.
Spróbuj jpg, jak nie - zrób na elemencie transform: scale(0.99); albo transform:scale(1.01) - w zależności co jest dla Ciebie lepsze - i ogarnij brakujące/nadmiarowe piksele.

Uwaga - jeżeli to jest jakiś główny element, nie tylko tło - i skalowanie miałoby dotyczyć całej strony - to jest zły pomysł.

0

No niestety jpg czy transform nic nie dało. Dopiero zabawa z onresize pomogła.

0

tzn co konkretnie zrobiłeś?

0

Jedyne co zadziałało jak powinno, czyli obrazek jest ostry wszędzie to osadzenie grafiki w html zamiast css i ustalanie jej maksymalnych rozmiarów na bieżąco względem obiektów nadrzędnych i sąsiadujących. Zrobił bym to w media queries z pewnymi skokami co również nie było by problemem gdyby nie taki szkopuł, że jest to podstrona, która nie ma posiadać scrolla, ogólnie wszystkie techniki zawiodły, jedyne co dało rade to dodatkowe 2 linijki js w onload i onresize.

0 użytkowników online, w tym zalogowanych: 0, gości: 0