應用-webkit-過濾器：模糊到全屏背景HTML標籤

我想申請：應用-webkit-過濾器：模糊到全屏背景HTML標籤

-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px);

到這是在我的HTML標籤來定義我的全屏背景。我寧願保留在這個標籤中定義的背景。我讀過其他需要在body標籤中定義背景的帖子，但我最好不要過度重構。

html { 
    background: url(../img/footballbg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

任何想法如何應用到背景，而不是兒童標記（身體等）？

來源

2014-05-23 James Patrick

我不是100％確定，但我希望blured'html'會模糊頁面上的所有內容，與body一樣。我最近玩弄了模糊的背景，我發現的最佳方式是在背景中有一個固定的div，並適用於此。模糊過濾器現在非常薄弱......非常有限且非常耗費資源。像你想要實現的理想解決方案很難用濾波器來實現。 –

夠公平 - 我會仔細研究一下。 –

您的整個頁面正在繪製，然後變得模糊，所有的都是兒童。如果你仔細想想，沒有辦法。

例如，如果你旋轉了你的html，你會期望它的任何東西都被旋轉，對吧？至少你可以將它旋轉回來，但是你不能'模糊'...

來源

2014-05-23 00:21:55 climbinghobo

非常真實 - 我從來沒有想過這樣。謝謝。 –

要真正回答這個問題，你需要一個絕對定位的元素，它帶有負Z指數或者類似樣式的僞元素。這樣，你只是設計背景而不是內容。

來源

2014-07-02 17:06:05

正如所說的@climbinghobo，你不能直接將其應用到html標籤，但你可以使用僞類::before實現它：

<html> 
    <head> 
     <style> 
     html { 
      position: relative; 
      min-height: 100%; 
     } 
     html::before { 
      content: " "; 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      right: 0; 
      left: 0; 
      background: url(http://placehold.it/600x400) top left repeat scroll; 
      z-index: -1; 
      -webkit-filter: blur(5px); 
      -moz-filter: blur(5px); 
      -o-filter: blur(5px); 
      -ms-filter: blur(5px); 
      filter: blur(5px); 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 
     </style> 
    </head> 
    <body> 
     Heyyy, this text has not been blurred! 
    </body> 
</html>

您可以檢查它的工作in this jsfiddle example。

另外，請記住，模糊效果不起作用在Firefox下但尚未（至少不在版本< 30.0 *）。得到它的工作，你需要使用svg filters：

html::before { 
    /* ... */ 
    -webkit-filter: blur(20px); 
    filter: blur(20px); 
    filter: url(filters.svg#blur); 
}

而且filters.svg（在這種情況下，同一文件夾下放置的css文件）文件應包含：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <filter id="blur" x="0" y="0"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> 
    </filter> 
    </defs> 
</svg>

*更新：最新的Firefox版本它現在工作:)（我目前正在使用版本37.0a2）

來源

2014-07-02 17:40:14 elboletaire

應用-webkit-過濾器：模糊到全屏背景HTML標籤

回答

相關問題