像素位置的CSS漸變（不是％）

如何創建一個從指定位置開始的程序化水平漸變（在x軸上的像素中）？像素位置的CSS漸變（不是％）

這裏是發出─我有設置爲background-image圖像 - 理想，我想要做的就是宣佈開始接近圖像（〜1800個像素）的邊緣，優雅地消失到CSS梯度全黑。

到目前爲止，最好的解決辦法我已經是有兩個DIV元素 - 一個與所述照片的背景和其他與用background-position始於1780px沿y軸重複1px的高梯度的圖像。

這有效，但我真的想擺脫1px圖像技巧。有任何想法嗎？

<div id="photobg"> 
<div id="gradientbg"> 
</div> 
</div> 

#photobg { 
background-image:url('photourl.jpg'); 
} 

#gradientbg { 
background-image:url('1pxgradient.jpg'); 
background-repeat: repeat-y; 
background-position: 1780px 0; 
height: 100%; 
}

我想怎麼辦，從理論上講，是用色停止在1780像素的CSS梯度，但據我所知，CSS僅支持％值作爲色標。

參考： CSS 3 Gradient n pixels from bottom - Webkit/Safari

來源

2012-08-17 CaseyHunt

沒有，您可以使用具有線性漸變的像素：

background-image: linear-gradient(transparent 1780px, black 100%);

您還可以在一個div上將此漸變與多個背景圖像結合使用。

你可能想看看這個jsbin，我已經爲你做的： http://jsbin.com/sonewa/1/edit

來源

2014-08-20 06:43:48

哎呀，我剛纔看到，這個問題已經超過兩年了。 8 [ – 2014-08-20 06:51:20

CSS的此塊會做你想要

background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla 
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE

什麼，而梯度是從顏色＃00AFF0到＃53D4FE（從上到下）

來源

2012-08-17 22:09:31 omoabobade

我不是尋找一個Webkit-一個漸變的例子，我要尋找一個解決方案，在一個像素開始漸變位置而不是背景的百分比。這不是答案。 – CaseyHunt 2012-08-20 15:24:44

像素位置的CSS漸變（不是％）

回答

相關問題