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

我有一个轻微的问题，我不确定是否有解决方案。如何在div边框上创建不带颜色的不透明渐变？

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

让我解释一下。

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

正如预期的那样，“SlideDiv”内容在视口边界之外消失。这里是诀窍。我想要的内容不只是消失，但消失:)

为了这个工作，我需要工程师视口边界上的不透明度渐变。由于背景上有复杂的图像，必须始终可见，此渐变无法与颜色相关。换句话说，我希望“不透明度：1（我们看到的内容）不透明度：0（我们看不到内容）”渐变，而不是“不透明度：0（我们看到的内容）为白色/黑色/绿色/ AnyColor不透明度：1（内容在不透明颜色后面）“渐变。

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

恐怕我不能告诉你任何与商业相关的原因。

问题是： - 是否可以使用CSS2或3，jQuery或插件或任何其他技术（不包括flash）？ - 如果是这样，怎么样？ :)

我希望我是清楚的，但我不那么肯定很抱歉的家伙;）

问候，日博乌

来源

2011-11-02 Jibou

[CSS3 Gradient Borders]的可能重复（http://stackoverflow.com/questions/2717127/css3-gradient-borders） – Blazemonger

@ mblase75 - 您链接的帖子不是重复的。这里的OP正在寻找挖空效果...... –

嗨mblase75，这个线程是关于颜色渐变，这些都是容易;） – Jibou

-2

看看this。你可以选择你喜欢的渐变，你可以保存任何支持渐变的浏览器的CSS

来源

2011-11-02 16:51:30

-1 OP清楚地解释了为什么CSS3渐变将不会削减它... –

约瑟夫是正确的。这会生成颜色相关的渐变。我实际上在寻找解决我的问题的同时在本网站上发短信; – Jibou

对不起！我很快就读到了这个问题，但我并没有完全理解它 –

-1

很酷..我从你的整个查询得到的是 i。）你想要应用渐变到边框 ii。）你也想淡入淡出效果边界。

如果我正确的或者非常接近得到它通过它，你可以使用下面的技巧。 i。）访问此link以获取与CSS的边界上的渐变。。 II），这可能会非常棘手：您可以为渐变创建一个SVG形状和绝对定位将其放置到您的全宽度和高度主要格（有很多，你可以管理的高度和宽度等方式元件。）。既然它将是一个SVG图像或脚本，你不需要担心结果。

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

来源

2017-06-18 05:09:24 TheLiquidCharcoal

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

回答

相关问题