CSS3 Degradeler, piksel yerine,

Question

yerine Sabit yükseklikli bir üstbilgi, alt başlık ve içerik div barındırmak için tarayıcı penceresinin boyutu ne olursa olsun, aynı uygun bir doğrusal degrade arka plan oluşturmak istiyorum .

Sorunum, sayfayı hareket ettirdiğimde degradenin ölçeklendirilmesini istemiyorum. Aynı sonucu elde etmek için 1px genişliğinde bir resim kullanabilirim, ama sanırım sitenin logoyu engelleyerek mümkün olduğunca görüntüsüz olmasını istiyorum.

Yüzde tanımlı bir degrade yerine piksel tanımlı bir degrade kullanmak mümkün mü?

Answer 1

Evet yapabilirsiniz. Standart birimleri yüzde yerine kullanılabilir. Bu örneğe bakın:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

Güncelleme

Yukarıdaki örnek kullanmak için tarayıcı ön ekleri dahil etmek gerekir.

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 

Answer 2

Eğer sabit boyutlu gradyan sahip boyutunu belirlemek için background-size özelliğini kullanmak istiyorsanız şu şekildedir: Onlar tanımlanmalıdır.