如何在後臺簡寫中實現CSS模糊？

目標是模糊背景而不模糊上面的所有其他元素。如何在後臺簡寫中實現CSS模糊？

使用單獨的div的背景和內容，並依託Z-索引的方法已被證明對我來說有點不靈活，所以我想知道是否有可能實現在後臺速記語法CSS模糊濾鏡（因爲「background-filter：blur（5px）」不是有效的CSS），它只會將其應用於背景。

Tesla用簡寫符號表現得很好，但他們使用透明/黑色漸變，而我想使用模糊。下面是是基於關閉特斯拉登錄頁面的，我已經嘗試了一些簡化代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="the-CSS-Written-Below"> 
    </head> 
    <body class="background-image"> 
     <div style="background-color: yellow"> 
      <p>Some text that shouldn't be blurred!</p> 
     </div> 
    </body> 
</html>

CSS：

.background-image{ 
    background: radial-gradient(transparent, hsl(0, 0%, 2%)), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed; 
}

這裏有一個JSFiddle這樣你就可以看看它的樣子。

然後，當我試圖將其簡寫過濾器改變從徑向漸變模糊，它停止工作：

CSS：

.background-image{ 
    background: blur(5px), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed; 
}

我不知道，如果模糊語法這裏只是是不正確的/它的速記需要不同，或者這是完全錯誤的方式。這樣的速記模糊甚至可能嗎？

來源

2017-08-10 Chrøme

問題是blur不是background屬性的值，而是filter。據Mozilla：

的背景 CSS屬性是在樣式表一個單一的地方設置個人背景值的簡寫。背景可以被用來爲一個或多個的設置值：<背景夾>，<背景色>，<背景圖像>，<背景原點>，<背景位置>，<背景重複>， < background-size >和< background-attachment >。

特斯拉可以使用background-gradient因爲background-image財產can have，因爲它的值：

< BG-圖像>＃
其中< BG-圖像> =無| <圖片>
其中<圖片> = <url> | <圖片（）> | < image-set（）> | < element（）> | < cross-fade（）> | <梯度>

來完成你想要的東西，這將需要2個的div，像這樣：

.background-image { 
 
    background: gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed; 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100vw; 
 
    height:100vh; 
 
    z-index:0; 
 
    filter:blur(5px); 
 
}

<body> 
 
    <div class="background-image"></div> 
 
    <div style="background-color: yellow;position:relative;"> 
 
     <p>Some text that shouldn't be blurred!</p> 
 
    </div> 
 
</body>

注意，您將有一個position:relative添加到您的其他div，使其出現在背景圖像div上方。

我已經使用了CSS3 vw（視圖寬度）和vh（查看高度）來強制background-image div的寬度和高度，但你可以使用%代替。

來源

2017-08-10 02:15:35 Jonathan

我很害怕這會是這種情況......但是，這是怎麼解釋徑向漸變（過濾器的屬性，對嗎？）以速記符號工作（請參閱原始文章中的小提琴）？ –

這是真的，它將使用'徑向漸變'，但只是因爲這是背景圖像屬性的有效值。我不確定這對你有意義嗎？我會編輯我的答案，以便更清楚地說明問題。 – Jonathan

是的，我現在看到。不幸的是，模糊不適合該類別。但是，我們使用我們的產品。謝謝！ –

如何在後臺簡寫中實現CSS模糊？

回答

相關問題