如何在div边界上创建没有颜色的不透明度梯度



我有一个小问题,我不确定有一个解决方案。

基本上我想创建一个不透明度梯度的div边界不依赖于颜色。

让我解释一下。

我有一个"overflow:hidden"div(我们将其称为MainDiv),它包含另一个大div(它将称为SlideDiv),我使用jquery滑动过视口。主div也有一个可以移动的"完整视口"背景复杂图像。所有这些都创造了一个非常好的视差效果。

正如预期的那样,"SlideDiv"内容消失在视口边界之外。这就是诀窍。我希望内容不仅仅是消失,而是逐渐消失:)

要做到这一点,我需要在视口边界上设计一个不透明度梯度。由于背景上有一个必须始终可见的复杂图像,因此此梯度不能与颜色相关。换句话说,我想要一个"不透明度:1(我们看到内容)到不透明度:0(我们看不到内容)"的渐变,而不是一个"不透明度:0(我们看到内容)到白色/黑色/绿色/AnyColor不透明度:1(内容在不透明的颜色后面)"的渐变。

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

由于业务上的原因,我恐怕不能给您看任何东西。

问题是:-是否可以使用CSS2或3,jQuery或插件或任何其他技术(不包括flash) ?-如果有,怎么做?:)

我希望我是清楚的,但我不确定,所以抱歉,伙计们;)

问候,Jibou

酷。我从你的提问中得到的是i)你想应用一个渐变的边界二)。你还想让边框有渐进渐退的效果。

如果我得到了正确的或非常接近它,你可以使用以下技巧。我)。访问这个链接,获得渐变的边界与css。二)。这可能很棘手:您可以为渐变创建svg形状,并将其与绝对定位一起放置在具有完整宽度和高度的主div中(还有许多其他方法可以管理元素的高度和宽度)。因为它将是一个SVG图像或脚本,你不需要担心结果。

如果我没有达到解决你的问题。让我知道我会再试一次。

看看这个。你可以选择你喜欢的渐变,然后你可以保存CSS到任何支持渐变的浏览器

相关内容

  • 没有找到相关文章

最新更新