CSS degrade nasıl düzgün yapılır?

Ben siyah bir arka plan var ve şeffaf 0.7 beyaza basit CSS gradyan ile içinde bir blok eklemek istiyorum:CSS degrade nasıl düzgün yapılır?

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76) 
)

Ama bu kötü görünüyor: buldum

tek yolu manuel olarak ek renk durakları eklemek.

background: linear-gradient(
    to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.05) 2%, 
    hsla(0, 0%, 100%, 0.09) 3%, 
    hsla(0, 0%, 100%, 0.2) 5%, 
    hsla(0, 0%, 100%, 0.57) 11.5%, 
    hsla(0, 0%, 100%, 0.69) 14%, 
    hsla(0, 0%, 100%, 0.75) 16.5%, 
    hsla(0, 0%, 100%, 0.76) 17.5%, 
    hsla(0, 0%, 100%, 0.77) 
);

Ve çok daha iyi görünüyor:

The comparsion demonstration on CodePen

renk vermiyor CSS degrade pürüzsüz hale getirmek için daha kolay bir yolu var mı?

kaynak

2016-12-28 Даниил Пронин

Bu gönderiyi kontrol edebilirsiniz: http://stackoverflow.com/questions/13151331/smooth-css-gradients –

Kendi sorumu oluşturmadan önce okudum. Bu konuda bir çözüm yok. Seçilen cevap, 0 ve% 100 hariç renk durakları kullanmamanız için sadece bir öneridir. Bu sorunu çözmek istiyorum, bir çözüm değil. –

Korkarım ki, ama bu örneklerden temel ayarları kullanabilirsiniz. Http://codepen.io/taylorvowell/pen/BkxbC – Roberrrt

Bir gün, umarım, bu var:

PostCSS eklentisi: https://github.com/larsenwork/postcss-easing-gradients

şimdilik

linear-gradient(
    to top, 
    hsla(330, 100%, 45%, 0), 
    cubic-bezier(0.45, 0, 0.5, 0.5), 
    hsla(330, 100%, 45%, 1) 
);

Bot, bu elimizde Bir hareket hızı işlevi seçmek için bir uygulama allowng: https://larsenwork.com/easing-gradients/

kaynak

2018-02-05 12:04:04

Tam olarak ne yapmayı amaçladığınızı tam olarak anlamadım, ama aldığım kadarıyla sol taraftaki bir degrade ile siyah bir arka plan üzerine bir kutu eklemek isteyeceksiniz (böylece hala siyah) 0.7 saydamlık veya # C2C2C2 ile beyaz. Yapmak istediğiniz şey buysa, hsl'yi (temel renk teorisi nedeniyle) kullanmam ama daha çok rgba kullanmam.

Kontrol şuna: yapmak amaçlanmaktadır ya da hala bir şey ile sıkışmış hissediyorum değilse

<html> 
<head> 
<style> 
#blackbg { 
background-color: black; 
height: 300px; 
} 

#grad1 { 
    height: 200px; 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
} 
</style> 
</head> 
<body>

, beni geri sormaya çekinmeyin.

<div id="blackbg"> 
<div id="grad1"></div> 
</div> 

</body> 
</html>

kaynak

2016-12-28 08:56:15 codingunicorn

Uups kod bölünmüş gibi görünüyor ... – codingunicorn

Bunu bir arka plan görüntüsü ile kaydırıcıda bir metin arka planı olarak eklemek istiyorum. Karanlık veya aydınlık olabilir, insan masaüstünden duvar kağıtları gibi. Bunu http://eco-vpk.ru adresinde veya bu ekran görüntüsünde görebilirsiniz: http://imgur.com/a/73Ozc –

tamam, şimdi anladım. Ancak degradi nereye eklemek istersiniz? Ürün nerede? VKP için mi çalışıyorsunuz yoksa elde etmek istediğiniz şey bu mu? – codingunicorn

CSS degrade nasıl düzgün yapılır?

cevap

İlgili konular