如何在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邊框上創建不帶顏色的不透明漸變？

回答

相關問題