在渐变背景图像上逐像素递增

Question

我得到的图像包含具有不同中间色的复杂渐变。 height: 1px; width:100px

我得到了背景色的div块。

我希望div块的背景颜色来自渐变图像。

例如：.div50类将渐变图像的50th像素作为背景，repeat-x和repeat-y。

实现这一目标的最佳方法是什么？ 谢谢！

Answer 1

目前似乎没有针对此的跨浏览器解决方案。

w3似乎正在为这个无法使用“图像片段”的问题开发一个很酷的解决方案 They propose在实际图片调用中裁剪图像 而不是使用：

background-image: url('swirl.png'); /* old UAs */

他们建议：

background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */

由于这仍然在进行中，它可能对您没那么有用......

---

如果您现在需要解决方案，请使用Mozilla：

background: -moz-image-rect(url('Image.jpg'), 0, 1, 1, 0);

这将获得图像的第一个像素（左上角）。

-moz-image-rect需要五个值：

1. 图片网址
2. 顶部 - 距离顶部开始的距离。
3. 右 - 从左侧开始结束的距离。
   • 指定宽度。
   • 必须始终大于“左”。
4. 底部 - 从顶部开始结束的距离。
   • 指定高度。
   • 必须始终大于“顶部”。
5. 左 - 从左开始的距离。

---

Example _{仅在Mozilla浏览器中可见}

使用此图片制作：


-moz-image-rect（url（'Image.jpg'），10,100,25,50）;

图片：Image.jpg
此图像将裁剪为15px高（在第10个像素之后立即开始并继续到第25个像素）和50px宽（在第50个像素之后立即开始并继续到第100个像素）。

---

一个简单的无需图像的解决方案，就是使用像素颜色查找器（例如instant eyedropper）来计算表示1x100图像中所有像素所需的100种不同颜色。使用这些颜色，您可以非常轻松地创建跨浏览器功能的背景。

希望这有帮助！

Answer 2

我会这样做：

HTML：

<div class="background_color">
    <div class="gradient_50"></div>
</div>

CSS：

.background_color{
    background-color:#121212;
    position:relative;
    height:150px;
    width:300px;
}

.gradient_50{
    background-color:red;
    height:50px;
    position:absolute;
    bottom:0px;
    width:100%;
}

JsFiddle您可以为背景图片添加效果