CSS漸變停止然後重複

我想讓我的網站背景漸變。這是因爲我剛剛開始製作網站，而我只想了解CSS如何工作，不知道如何工作。CSS漸變停止然後重複

這裏是我的代碼：

background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6+ */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))); /* Chrome,Safari4+ */ 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10+,Safari5.1+ */ 
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Opera 11.10+ */ 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* IE10+ */ 
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=0); /* IE6-9 */

我不想梯度停止再從白色重複。我希望漸變可以根據當前媒體的大小進行更改。

來源

2012-11-25 Soulevoker

我不明白這個問題，它似乎在Chrome中正常工作。您遇到問題的任何特定網絡瀏覽器？ – jcolicchio

我正在使用Chrome。漸變停止在頁面的一半，然後從頂部重複。漸變設置爲固定大小，我希望它調整大小。我會張貼我的網站的照片，但我不想被取笑。 – Soulevoker

嘿，我們都必須從某個地方開始。無論如何，看起來問題可能在HTML/CSS的不同部分，下面的答案可能有所幫助。使用你給我的東西，我把這個放在一起：http://jsfiddle.net/jcolicchio/LFN3R/它看起來工作得很好... – jcolicchio

這就是你需要做的，將高度：100％應用到html和body。如果您的網站將在移動設備上，您將需要添加

background-attachment：也固定在身體上。

html{ 
height: 100%; 
} 
body{ 
height: 100%; 
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6+ */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))); /* Chrome,Safari4+ */ 
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10+,Safari5.1+ */ 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.65) 100%); /* Opera 11.10+ */ 
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0.65) 100%); /* IE10+ */ 
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=0); /* IE6-9 */}

來源

2012-11-25 03:43:12 Rayshawn

謝謝。雖然這看起來很奇怪。 – Soulevoker

集height和HTML和身體100％的width，而這些選項的背景：

background-repeat: no-repeat; 
background-attachment: fixed;

Demo

如果沒有梯度會重複，當你滾動超過瀏覽器的高度。

來源

2012-11-25 03:46:00 bookcasey

CSS漸變停止然後重複

回答

相關問題