「毛玻璃」效果是否僅在此時用CSS實現？

磨砂玻璃效果（其中疊加層既有模糊又有淺色）是iOS中的常見UI元素。「毛玻璃」效果是否僅在此時用CSS實現？

目前是否有用CSS實現的？有很多與此有關的問題，但他們在做什麼方面受到限制。它們通常僅限於在圖像上疊加覆蓋圖 - 而不是完全渲染的用戶界面。

所以，很明顯，我不是在尋找一種方式來模糊圖像本身，而是一種模糊UI下的元素。所以說我有一個帶有HTML按鈕和HTML文本的HTML表單，我想在它們上面放置一個div，以便下面的任何內容看起來都很模糊。然後我可以滾動下面的內容，當元素進入和離開覆蓋層時，它們只在div下方模糊。

我的理解是，這個問題的答案是不，這是目前不可能與CSS但我也對新花裏胡哨有點生疏...

來源

2015-09-11 DA.

你可以把覆蓋在整個身體'位置：絕對;頂部：0;左：0;底部：0; right：0;' – maioman

它將與['backdrop-filter']（https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter）一起使用。您可以使用['filter']（https://developer.mozilla.org/en/docs/Web/CSS/filter），['mix-blend-mode']（https：// developer。）構建解決方法。 Mozilla瀏覽器。org/en/docs/Web/CSS/mix-blend-mode）和['background-blend-mode']（https://developer.mozilla.org/en/docs/Web/CSS/background-blend-mode ）。 – Xufox

@maioman覆蓋很簡單。磨砂玻璃效果是挑戰。 –

你在找什麼是backdrop-filter，自2015年8月（see post），它已經在WebKit的。它在Safari 9中發佈（September 30, 2015，是OS X El Capitan的一部分），並且通過啓用實驗性Web平臺功能標誌在Chrome中運行。

使用背景濾鏡，獲得「實時模糊」就像將backdrop-filter: blur(10px)添加到給定元素一樣簡單。

演示here。

它可能會持續一段時間，直到它成爲主流，但它會使我們做得比毛玻璃效果更多（即夜間模式，read more here）。好消息是，有很多人對此感到興奮，所以我們希望我們不必等太久。如果是古董，here's的規格。

如果你想跟蹤此功能的進步，請上網：

來源

2016-09-29 09:56:16

我喜歡這樣的答案在一年後彈出。這很光滑！這是相對較新的嗎？（我已經失去了什麼版本的Safari發佈時... ...） –

OMG，我失去了15分！ - 開個玩笑，好回答.-） – vals

@vals哈哈！讓貓在你的回答中+1，在我的一些錯過。 –

據我所知，這隻能在Firefox中實現。

關鍵是background-image：element。在我看來，最有用的屬性之一是「可能是某天」列表中的那些屬性

僅在FF中工作的演示。請注意，霜不是孩子或測試的父母

img { 
 
    margin-top: 5px; 
 
    margin-left: 40px; 
 
    animation: move 1s infinite; 
 
} 
 

 
#frost { 
 
    border: solid 1px blue; 
 
    width: 250px; 
 
    height: 250px; 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 120px; 
 
    background-color: white; 
 
    background-image: linear-gradient(rgba(0,0,100,0.2), rgba(0,0,100,0.2)), -moz-element(#test); 
 
    background-position: -45px -112px; 
 
    background-repeat: repeat, no-repeat; 
 
    filter: blur(4px); 
 
    opacity: 1; 
 
} 
 

 

 
button:hover { 
 
    background-color: red; 
 
} 
 
@keyframes move { 
 
    from {transform: translate(0px);} 
 
    to {transform: translate(40px);} 
 
}

<div id="test"> 
 
    <button>BUTTON</button> 
 
    <img src="http://placekitten.com/1000/750" width="300px" height="300px"/> 
 
</div> 
 
<div id="frost"></div>

來源

2015-09-13 14:39:18 vals

@MarcosPérezGude謝謝！ – vals

這非常漂亮！唉，它仍然不是我期待的理想的「實時」效果，因爲您不能在下面主動更新DOM並保留活動模糊。所有這一切說，我認爲這是接近，因爲我們現在可以得到。（唉，在瀏覽器完全支持它的時候，它會是一種超出風格的效果:) –

@DA。 _「你不能在下面的DOM主動更新和保留一個活的模糊」_適用於我，雖然... – Xufox

「毛玻璃」效果是否僅在此時用CSS實現？

回答

相關問題