如何在div边框上创建不带颜色的不透明度渐变？

Question

我有一个小问题，我不确定是否有解决方案。

基本上我想在不依赖于颜色的div边框上创建不透明度渐变。

让我解释一下。

我有一个“overflow：hidden”div（我们称之为MainDiv），它包含另一个使用jquery在视口中滑动的大div（将调用SlideDiv）。主div具有“全视口”背景复杂图像，也可以移动。一切都创造了一个非常好的视差效果。

正如预期的那样，“SlideDiv”内容消失在视口边界之外。现在这是诀窍。我希望这些内容不仅会消失，而且会逐渐消失：）

为此，我需要在视口边框上设计不透明度渐变。由于背景上的复杂图像必须始终可见，因此此渐变不能与颜色相关。换句话说，我想要一个“不透明度：1（我们看到内容）到不透明度：0（我们看不到内容）”渐变而不是“不透明度：0（我们看到内容）到白色/黑色/绿色/ AnyColor不透明度：1（内容位于不透明颜色后面）“渐变。

这意味着我不能使用-webkit-gradient或-moz-linear-gradient。或者我可以吗？

我担心出于商业原因，我无法向您展示任何内容。

问题是： - 是否可以使用CSS2或3，jQuery或插件或任何其他技术（闪存除外）？ - 如果是的话，怎么样？ ：）

我希望我很清楚，但我不太确定那些对不起的家伙;）

此致 日博乌

Answer 1

酷..我从你的整个查询得到的是 i。）您想要在边框上应用渐变 ii。）你也希望淡入和淡出效果到边框。

如果我正确地或非常接近它，你可以使用以下技巧。  i。）访问此link以获得与css边界的渐变。 ii。）这可能很棘手：您可以使用渐变创建一个svg形状，并将其以绝对定位放置到具有全宽和高度的主div中（还有很多其他方法可以管理元素的高度和宽度） ）。因为它是一个SVG图像或脚本，所以你不必担心结果。

如果我无法解决您的问题。让我知道我会再试一次。

Answer 2

看看this。您可以选择自己喜欢的渐变，也可以从中为任何支持渐变的浏览器保存CSS