Jak mogę zapobiec gradientowi pasków CSS?

Question

Zacząłem używać gradientów CSS, a nie rzeczywistych obrazów, z dwóch powodów: po pierwsze, gradient CSS zdecydowanie ładuje się szybciej niż obraz, a po drugie, nie powinny pokazywać pasmowania, tak jak wiele grafik rastrowych. Ostatnio zacząłem testować moją witrynę na różnych ekranach, a na większych (ponad 24 cale) gradient liniowy CSS, który stanowi tło mojej witryny, pokazuje bardzo wyraźne pasmo. Jako tymczasowe poprawki, nałożyłem gradient na mały, powtarzalny, przezroczysty obraz szumu, który pomaga trochę. Czy jest jakiś inny sposób na naprawienie tego problemu z bandowaniem?

Answer 1

Wiem, że nie spodoba ci się ten dźwięk, ale jedyny sposób, aby uzyskać spójną estetykę w różnych przeglądarkach w tym przypadku, to jedyny sposób, aby uzyskać powtarzalny obraz.

Jeśli jest to prosty liniowy gradient, wystarczy, że ma on szerokość 1px i wysokość gradientu, a następnie zmień kolor tła strony jako ostateczny kolor gradientu, aby działał płynnie. Pozwoli to zachować niewielki rozmiar pliku.

Jeśli chcesz zmniejszyć gradientowe pasma na obrazie, użyj formatu PNG (nie przezroczystości), ponieważ uważam, że lepiej pasują do tego celu niż JPG.

W programie Adobe Fireworks wyeksportowałem to jako PNG-24.

Powodzenia.

http://codepen.io/anon/pen/JdEjWm

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); 
    background: -webkit-linear-gradient(top, black, white); 
    background: -moz-linear-gradient(top, black, white); 
    background: -ms-linear-gradient(top, black, white); 
    background: -o-linear-gradient(top, black, white); 
    background: linear-gradient(top, black, white); 
} 

Answer 2

Nie ma żadnej metody usuwania pasków. Gradienty CSS są na łasce różnych silników renderujących przeglądarek. Niektóre przeglądarki po prostu renderują się lepiej niż inne. Najlepsze, co możesz zrobić, to krótkie obszary do pokrycia i większe zakresy kolorów, aby zwiększyć gradientowe kroki .... Następnie poczekaj na poprawienie mechanizmu renderowania przeglądarki.

Answer 3

Można wydajność nieznacznie lepsze wyniki poprzez swoją gradientu przejść od pierwszego koloru do przezroczystości, z background-color spodu do drugiego koloru. Polecam również zabawę z background-size dla dużych gradientów rozciągających się na ekranie, więc gradient nie wypełnia całego ekranu.

Answer 4

Zrobiłem "scatter.png", aby umieścić z gradientem. Tak:

1. Otwórz GIMP
2. 100x100 obraz
3. Dodaj kanał alfa
4. Filtry -> Szum -> Hurl ... Zaakceptuj domyślne
5. Set opactity do 5%

6. Zapisz a następnie dodaj do gradientu.

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%); 
   

Jest to subtelny wpływ na subtelny efekt.

Answer 5

Aby uzyskać czystą odpowiedź CSS, można użyć filtru rozmycia, aby dodać rozmycie do gradientu css i złagodzić pasmo. Może to oznaczać, że przebudowanie hierarchii nie powoduje rozmycia zawartości i musisz ukryć przepełnienie, aby uzyskać ostre krawędzie. Działa naprawdę dobrze na animowanym tle, gdzie problem z bandowaniem może być szczególnie tragiczny.

.blur{ 
    overflow:hidden; 
    filter: blur(8px); 
} 

Answer 6

Znam ten problem został rozwiązany długo, ale dla innych, doświadcza pasma i szuka rozwiązania, bardzo łatwo naprawić dla mnie właśnie uproszczenie kolory ja zawartych w mojej gradientu. Na przykład:

Ten gradient produkuje pasy:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%, 
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%); 

Ten gradient nie, i wygląda tak samo:

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);