CSS Arkaplan Lineer Gradyan

Alt

için Üstteki I gibi yukarıdan aşağıya doğru doğrusal bir degrade oluşturmak için çalışılıyor: Ne yazık ki ne eldeCSS Arkaplan Lineer Gradyan

Gradient I want!

geçerli:

Gradient I get

Aşağıdaki benim HTML:

Ve CSS: Sonra 90deg yerine 0deg yaparsanız

body{ 
    background: linear-gradient(0deg, white, blue 80%) ; 
}

Ben bu olsun:

Gradient with 90deg

Bu gradyan ihtiyacım - ama üstten 90deg yani döndürülebilir olmalıdır soldan sağa yerine dibe. Merak ediyorum neden 0deg tekrarlanan bir gradyana benzer bir şey veriyor gibi görünüyor.

Tarayıcıları Firefox 21 ve Chrome 27 kullandım. Herhangi bir öneri için minnettar olurdum.

kaynak

2013-06-18 O.O.

Vücudunuzun hesaplanan yüksekliği nedir? CSS gövdesini% 100 yüksekliğe ayarlamayı deneyin. – jtheman

yerine <html> geçmişini belirlemeyi deneyin - yönetmek daha kolay olabilir . O zaman bir height:100%; verin ve tüm sayfayı uzattığından emin olun.

Ayrıca, no-repeat olarak ayarlıyorum, böylece daha uzun içeriğiniz olduğunda alttan başlayarak bunun yerine yalnızca bir degrade olsun.

html{ 
    height:100%; 
    background: linear-gradient(0deg, white, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

Düzenleme

fr13d html üzerinde gradyan koyarak zaman, gradyan öncesinde herhangi kaydırma ilk sayfasının alt, üzerinde duracaktır yorumlarda dikkat çekti. Yani, siz kaydırdığınızda, degrade kesilir (arka plan rengi degradenin alt renginden farklıysa fark edilebilir). Bu çevrede

bir yolu yerine body üzerinde stil koymaktır:

body{ 
    height:100%; 
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/117/

kaynak

2013-06-18 22:27:44 DACrosby

Mükemmel çalıştı ** DACrosby **. Teşekkür ederim. –

Biraz geç, ama eğer ' 'ekranınızın altından geçecek kadar içeriğe sahipse, görünüşünüzde kaydırılan yeni parça artık arka plana sahip değil gibi görünüyor. (Gradyanızın alt kısmı beyaz olduğunda, bu sizin durumunuzda önemli değildir.) – fr13d

iyi nokta @ fr13d, Yanıtı güncelle – DACrosby

bir yolu eski hiçbiri sahip olduğu <body> ve <html> elemanlarını açık bir yüksekliğe vermektir, ne de herhangi bir içeriği:

http://jsfiddle.net/qL9mg/1/

kaynak

2013-06-18 22:11:46 Adrift

Teşekkürler * Adrift **. Bu iş gibi görünüyor. Eğer html değil, sadece 'bed' olmadan yaparsanız, o zaman işe yaramaz. Neden hem "vücut" hem de "html" belirtiliyor? –

Ayrıca, aşağı kaydırmak için kaydırma çubuğunu kullanırsanız, koyu mavi bir çizgisi vardır. Bundan kurtulabilir miyiz? –

@ O.O: "", yüzde değerinin her zaman başka bir değere göre göründüğünden% 100 yüksekliğin * atıfta olduğunu * bilmediğinden Ebeveyninin boyu. – Adrift

deneyin bu:

html { 
    height: 100%; 
    background: linear-gradient(0deg, white, blue 80%) ; 
} 

body { 
    height: 0%; 
}

kaynak

2014-06-30 13:02:25 teteArg

Ben @DACrosby gelen çözelti ile katılıyorum, ama tavsiye arka planı 'sabit' ile genişletmek için. Bu durumda, arka planınız yerinde kalacak ve tüm site için yalnızca üstte değil degrade olacak.

background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;

kaynak

2014-07-31 12:08:29 WebWorker

CSS Arkaplan Lineer Gradyan

cevap

İlgili konular