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

Question

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

我得到了带有背景颜色的 div 块。

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

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

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

Answer 1

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

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

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. 右 -从左侧 到终点的距离。
   • 指定宽度。
   • 必须始终大于“Left”。
4. 底部 -从顶部 到结束的距离。
   • 指定高度。
   • 必须始终大于“顶部”。
5. Left -从左侧开始的距离。

---

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

使用此图像制作：

-moz-image-rect(url('Image.jpg'), 10, 100, 25, 50);

图片：Image.jpg
此图像将被裁剪为 15px 高（从第 10 个像素开始，一直到第 25 个像素）和 50px 宽（从第 50 个像素开始，一直到第 100 个像素）。

---

一个有点简单的不需要图像的解决方案是使用像素颜色查找器，例如即时吸管，找出代表 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你可以为你的效果放置背景图片