CSS：底部带有透明图像的Div答案

【问题标题】：CSS : Div with transparent image at the bottomCSS：底部带有透明图像的Div
【发布时间】：2012-01-13 22:50:14
【问题描述】：

我有以下情况：

Div 顶部必须是纯色，然后在底部应该是 1px 宽的透明图像。（所以最终的外观应该是我从上到下的 div 有一个渐变）当我放：

background: #fff url("../../images/bck1px.png") repeat-x scroll center bottom transparent;

白色显示在透明图像上

我必须以 CSS2 样式执行此操作！

有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

这是一个链接......也许这就是你想要做的。

如果是，诀窍是使用图像并让它在 div 的底部对齐并水平重复。明确是为了确保推动容器 div 的底部。

祝你好运

【讨论】：

但我的图像不同，它顶部是白色，底部是透明的，这样在 css 中定义的颜色将覆盖图像！（因为它是透明的）
抱歉，我们如何删除底部填充，并使用相同的图像？（所以底部的文字背景就是那个图像）？
这是另一个链接，底部的阴影可能与您的不完全一样，但我认为它现在可以工作了。我所做的是创建了一个 2px x 2000px 高度的白色图像，底部有透明阴影。所以你只需要对齐 div 底部的背景图像，水平重复它，只要你的 div 不超过 2000px 高度就可以了。如果需要的话，我可以做到 4000。这是链接jsfiddle.net/etienne_carre/GEkFn/17

【解决方案2】：

您的要求并不完全清楚 - 透明图像是透明的，因此不会创建渐变。

在您发布的代码中，您应用了白色背景颜色和图像 (background: #fff url...)。如果你忽略了颜色 (background: url...)，你就不应该再变白了。不知道能不能解决你的问题。

如果您可以将所有应用于 <div> 的 CSS 发布，那可能会有所帮助。

【讨论】：

【解决方案3】：

如果有人来到这里，未来终于来了，有更好的方法来做到这一点。

请参阅以下链接以获取 CSS 方法： Gradient opacity on the bottom of div

【讨论】：

来自Help Center：鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户知道它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。