3

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

这就是问题所在 - 我将图像设置为background-image- 理想情况下，我想做的是声明一个 CSS 渐变，它从靠近图像边缘（~1800 像素）开始并优雅地渐变为全黑。

到目前为止，我最好的解决方案是有两个 div 元素——一个带有照片背景，另一个带有一个 1px 高的渐变图像，沿着 y 轴重复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 pixel from bottom - Webkit/Safari

4

2 回答 2

4

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

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

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

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

于 2014-08-20T06:43:48.877 回答
0

这个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-17T22:09:31.807 回答