web-gelistirme-sc.com

CSS gradyan bantlamasını nasıl önleyebilirim?

İki nedenden ötürü gerçek görüntüler yerine CSS gradyanlarını kullanmaya başladım: birincisi, CSS gradyanı kesinlikle bir görüntüden daha hızlı yüklenir ve ikincisi, pek çok raster grafik gibi, bant göstermemeleri gerekir. Sitemi son zamanlarda çeşitli ekranlarda test etmeye başladım ve daha büyük olanlarda (24+ inç), sitemin arka planını oluşturan CSS doğrusal gradyanı çok görünür bantlanma gösteriyor. Geçici bir düzeltme olarak, degradeyi küçük, yinelenen, saydam bir PNG gürültü görüntüsü ile kapladım, bu biraz yardımcı olur. Bu bantlama sorununu çözmenin başka bir yolu var mı?

34
John Doe

Bunun sesini beğenmeyeceğinizi biliyorum, ancak şu anda tutarlı bir çapraz tarayıcı estetiği elde etmenin tek real yolu, yinelenen bir görüntü kullanmaktır.

Eğer basit bir doğrusal degrade ise, o zaman sadece 1 piksel genişliğinde ve degrade kadar yüksek olması gerekir, o zaman degradenin son rengi olarak sayfanın arka plan rengini düzgün bir şekilde çalışması için yapın. Bu dosya boyutunu küçük tutacaktır.

Görüntünüzdeki degrade bantlarını azaltmak istiyorsanız, bu amaç için JPG'lerden daha uygun olduğunu düşündüğüm bir PNG (saydamlık değil) kullanın.

Adobe Fireworks uygulamasında bunu bir PNG-24 olarak dışa aktarırdım.

İyi şanslar.

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);
}
18

Gradyanızın birinci renkten saydamlığa gitmesini sağlayarak, ikinci renginiz için bir background-color altına alarak daha iyi sonuçlar elde edebilirsiniz. Ayrıca ekran boyunca uzanan büyük degradeler için background-size ile oynamayı tavsiye ederim, bu nedenle degrade aslında tüm ekranı doldurmaz.

16
AlexKempton

Gradyanı koymak için bir "scatter.png" yaptım. Bunun gibi:

  1. Açık gimp
  2. 100x100 görüntü
  3. Alfa kanalı ekle
  4. Filtreler -> Gürültü -> Çarpma ... Varsayılanları kabul et
  5. Etkinliği% 5 olarak ayarla
  6. Kaydet ve degradeye ekleyin.

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

İnce bir efekt üzerinde ince bir etki.

4
Michael Cole

Bu sorunun uzun zamandır çözüldüğünü biliyorum, ancak başka bir grupla karşılaşıyor ve bir çözüm arayışı içindeyken, benim için çok kolay bir düzeltme sadece degrademe eklediğim renkleri basitleştiriyordu. Örneğin:

Bu degrade bant oluşturuyor:

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

Bu degrade değil ve aynı görünüyor:

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

Bantlamayı çıkarmak için gerçekten bir yöntem yok. CSS degradeleri, tarayıcıların çeşitli görüntü oluşturma motorlarının insafına. Bazı tarayıcılar basitçe diğerlerinden daha iyi sonuç verir. Yapabileceğiniz en iyi şey, kapama alanlarının kısa olması ve degrade adımlarını arttırmak için daha geniş renk aralıklarının olması ...

1
Scott

Saf bir CSS cevabı için css gradyanına bulanıklık eklemek ve bantlamayı hafifletmek için bulanıklaştırma filtresi kullanabilirsiniz. İçeriği bulanıklaştırmamak için hiyerarşinin yeniden inşası anlamına gelebilir ve keskin kenarlar elde etmek için taşmayı gizlemeniz gerekir. Gruplama sorununun özellikle korkunç olabileceği hareketli bir arka plan üzerinde gerçekten iyi çalışıyor.

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