線性漸變百分比與像素

我有兩個例子，這兩個例子，據我所知，應該是相同的。線性漸變百分比與像素

的百分比是基於這是960px;

這裏的像素版本，這似乎工作的偉大寬度計算。

.pixel { 
    background-color: #111111; 
    background-image: linear-gradient(90deg, transparent 40px, #444 20px); 
    background-size: 60px, 950px; 
    background-position: 10px, 10px; 
}

但是基於相同的百分比坡度不工作：

.percentage { 
    background-color: #111111; 
    background-image: linear-gradient(90deg, transparent 4.1666%, #444 2.08333%); 
    background-size: 6.25%, 98.95833%; 
    background-position: 1.04167%, 1.04167%; 
}

我要當容器縮小尺寸使用百分比，使這個梯度液。

DEMO：http://jsfiddle.net/shannonhochkins/A3Z2L/3/

來源

2013-07-10 Shannon Hochkins

它看起來像linear-gradient內的百分比預計加起來高達100％。

你的第二個例子是「在background-size的6.25％（60px）內，第一個4.1666％是透明的，而下一個2.08333％是灰色的」，但是你沒有指定剩餘的93.75007％ 60px應該是。（看起來它只是使用剩餘空間的最後一種顏色，所以在60-px背景尺寸下，透明度爲4.1666％，其餘爲95.8334％灰色。）

鑑於您的比例爲66在第一個例子中，％/ 33％，你的第二個例子應該使用linear-gradient(90deg, transparent 66.6667%, #444 33.3333%)。

來源

2013-07-10 12:51:22

啊，當然！謝謝！ –

也無關，但是有沒有我應該爲'-webkit-，-o-，-moz-'創建的這個漸變的版本？ –

第一種情況下的20px值和第二種情況下的33.3％都沒用。任何低於前一個的停止值將被設置爲該值。因此，在第一種情況下，0px和40px之間的任何值將在40px處從透明變爲紅色。而任何高於40px的值都會給出軟轉換。例如，將第二站設置爲42px將在2 px期間進行轉換。百分比也是如此 – vals

背景圖像的百分比不是基於1000像素。它基於背景大小。在這種情況下，你需要60px的66.6％。

.percentage { 
background-color: #111111; 
background-image: linear-gradient(90deg, transparent 66.6666%, #444 2.08333%); 
background-size: 6.25%, 98.95833%; 
background-position: 1.04167%, 1.04167%; 
}

來源

2013-07-10 12:51:01 MiniRagnarok

謝謝！雖然你的第二個線性漸變寬度不正確，但它應該是3.333經常出現:) –

@ShannonHochkins你的意思是33.3333。我改變了Chrome中的高度值，並沒有什麼區別。儘管如此，儘管我知道它在現實生活中的確存在。 – MiniRagnarok

我確實說過反覆出現，但無論如何，第二個參數是水平間距，所以你知道 –

線性漸變百分比與像素

回答

相關問題