iOS7樣式鎖定屏幕--HTML5和CSS3

我正在嘗試爲我的UI重新創建iOS7鎖定屏幕的外觀和感覺。請參閱下面的例子： enter image description here iOS7樣式鎖定屏幕--HTML5和CSS3

我使用一些先進的CSS濾鏡（http://demosthenes.info/blog/534/Crossbrowser-Image-Blur）模糊的背景圖像。

-webkit-filter: blur(10px);

然後我使用有其不透明度設置覆蓋：

background-color: rgba(0,0,0,0.6)

要開始，我想重新創建圓形按鈕。但是，我不確定如何讓「下切」到下面的工作層。請看我的jsFiddle http://jsfiddle.net/abehnaz/cpwvU/6/

有沒有一種巧妙的方法來完成這項工作？

2013-10-04 Diode Dan

也許更好的方法來問這個問題將問我如何能夠正確使用alpha混合。 –

你有沒有得到這個問題和css3的任何地方？ – cDima

那時我停止了這個工作。截至2014年10月15日，這可能是可能的。新的CSS背景混合模式和CSS過濾器可以使Webkit（僅限Chrome？）能夠做到這一點。不過，我認爲將其作爲跨瀏覽器效果會很困難。 –

問題，我發現江戶奔Shitrits的回答非常好做。

2013-10-04 16:05:59 bbs

有趣的帖子。這在性質上是相似的，但不包括幾乎不透明覆蓋圖的「減去」部分。具體來說，我的問題是關於鎖屏，而不是控制中心。 –

回答