css3漸變中心漸變

沒有人知道如何使中心漸變漸變從淺到深與約-20px頂部的偏移？css3漸變中心漸變

這是我已經能夠到目前爲止做

background-color:#303030; 
background-image:-moz-linear-gradient(left,#282828,#616161,#303030); 
background-image:-webkit-linear-gradient(left,#282828,#616161,#303030); 
background-image:-o-linear-gradient(left,#282828,#616161,#303030); 
background-image:-ms-linear-gradient(left,#282828,#616161,#303030); 
background-image:linear-gradient(left,#282828,#616161,#303030);

enter image description here

來源

2012-08-29 acctman

圖片中發生了什麼？右邊的這個位肯定會*看起來像是正常工作......它有什麼問題？ – KRyan

@DragoonWraith右邊距離我可以到達中心漸變點......我想我對中線較淺的線條很挑剔。它不像PS設計那樣傳播。 – acctman

左邊不是線性漸變，它看起來是放射狀的。這裏有一個如何做一個用例的偏差： http://codepen.io/mastastealth/pen/ocIaz

基本上使用這樣的（應用適當的前綴，而中老年的IE不支持）：

background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);

來源

2012-08-29 20:45:12 Brian

+1好抓。它似乎更像是一個徑向漸變而不是線性漸變。儘管你可能應該在你的回答中包含你的代碼以防未來的鏈接腐爛。 –

謝謝，你是否使用過一個生成器，如果有的話，你有鏈接...如果不是每個數字後的顏色代碼表示它會做什麼？ – acctman

您可以使用www.colorzilla.com/gradient-editor來幫助您可視化您的漸變（手動添加偏移）。％代表顏色的「位置」。在徑向上，0％是中心，100％是最外部的邊緣，你可以根據你想要的漸變來玩中間的一個（或多個）。 – Brian

我認爲「頂部偏移約20像素的」的意思是你想要的梯度下移20px的？如果是這樣的話，你需要創建一些像div這樣的元素，應用你的漸變，然後將其放置在大約20像素的位置。

看到這個JSFiddle。這可以通過許多不同的方式完成;這裏我只是用絕對定位：

<div id="abc"></div> 

#abc { 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    /* gradient here */ 
}

來源

2012-08-29 20:15:11

AFAICT你不能做到這一點用一個漸變，但你可以用兩個嵌套元素中的兩個漸變來完成。儘管漸變填充整個圖像，但您可以指定透明的色彩停止。

您的外部元素需要照顧左側，並使用「向右」線性漸變，該漸變會淡出中心顏色。內部元素照顧右側，使用「向左」漸變漸變爲透明，從而讓左側漸變出現。

<div class="gradient"> 
    <div class="gradient-inner"> 
    Content 
    </div> 
</div> 

.gradient { 
    background-image: linear-gradient(
    to right, 
    red, 
    green 40px 
); 
    height: 200px; 
    width: 100%; 
} 
.gradient-inner { 
    background-image: linear-gradient(
    to left, 
    red, 
    green 40px, 
    rgba(0, 0, 0, 0) 40px 
); 
    height: 200px; 
    width: 100%; 
}

來源

2014-07-04 20:52:54 joachim

我知道這是舊的，但認真嗎？自從我們有能力做漸變以來，我們已經能夠放置超過2個色塊.... – RozzA

css3漸變中心漸變

回答

相關問題