像素位置的CSS渐变（而非百分比）

Question

如何创建一个程序化的水平渐变，从指定位置（在x轴上的像素）开始？

这里有个问题-我设置了一个图片作为background-image - 理想情况下，我想声明一个CSS渐变，从图片边缘附近（约1800像素）开始，并逐渐淡出到完全黑色。

到目前为止，我得到的最佳解决方案是使用两个div元素-一个具有照片背景，另一个具有1像素高的渐变图像，沿y轴重复，并且background-position从1780px开始。

这可以解决问题，但我真的想避免使用1像素图像技巧。有什么想法吗？

<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

- CaseyHunt

Answer 1

不，你可以使用像素与线性渐变：

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

您还可以将此渐变与一个 div 上的多个背景图片组合使用。

您可能想查看我为您制作的这个 jsbin： http://jsbin.com/sonewa/1/edit

- Lorenz Merdian

---

糟糕，我刚才才发现这个问题已经超过两年了。8[ - Lorenz Merdian

Answer 2

这个 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（自上而下）时

- omoabobade

---

我不是在寻找Webkit的渐变示例，而是在寻找一种解决方案，可以从像素位置开始渐变，而不是背景的百分比。这不是答案。 - CaseyHunt