Question

如何创建从指定位置开始的编程水平渐变（以x轴为单位的像素）？

问题在于 - 我将图像设置为background-image - 理想情况下，我想要做的是声明一个接近边缘的CSS渐变图像（~1800像素）并优雅地淡化为全黑。

到目前为止，我所拥有的最佳解决方案是拥有两个div元素 - 一个具有照片背景，另一个具有沿y轴重复的1px高梯度图像，其中background-position从1780px开始。

这很有效，但我真的想摆脱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

Answer 1

不，您可以使用具有线性渐变的像素：

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

您还可以在一个div上将此渐变与多个背景图像合并。

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

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（从上到下）

像素位置的CSS渐变（不是％）

2 个答案: