模糊背後的div CSS

我在一個網站上工作，我需要藍色背景的背後，我無法找到一種方法來使用CSS。模糊背後的div CSS

我發現了一篇文章展示瞭如何去做，但我無法準確地複製它。

下面是文章：https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

這裏是我的網頁：http://biolinks.redxte.ch/blur

如果有人可以讓我知道我做錯了什麼，將是巨大的，謝謝。

來源

2017-03-07 RedXTech

你好，我再次。我只是在仔細閱讀過去的小提琴，我發現這個https://jsfiddle.net/RachGal/81v5ge58/這是一個模糊背景但不是文字的懸停事物。看看它，你可能會發現一些可能有用的東西 –

你太親近了！

上.name-container刪除position: relative並將其添加到.head

更新：

刪除.name-bg，（使用display: none如果neccessary），並改變.name z索引爲1或更大。然後添加此代碼。

.name:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    background-position: center -373px; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    filter: blur(10px); 
    border-radius: 8px; 
    z-index: -1; 
} 

.head, .name:after { 
    background-size: 1500px auto; /* Really, this */ 
    background-position: center; /* and this is the only code .head needs */ 
    background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg'); 
}

注意：由於該網站使用，你必須設置一個絕對background-size不幸。另外，隨着@media代碼的使用，您需要修改代碼。

希望它有幫助！

來源

2017-03-07 20:49:07

這很有用，但並不完全適合我需要的功能。這會使整個背景變得模糊，而不僅僅是'.name' div背後的部分。 – RedXTech

@RedXTech我已經在您的網站上測試過它，並讓它工作。你能夠嗎？ –

將模糊濾鏡添加到#pp css（在.name類中使用的img id），並將其從名稱-bg（它影響整個背景）中刪除。這應該對你更好。 10px可能有點多。我預覽它（見圖片）

希望這有助於

編輯：

你的代碼仔細看看後（並看到你的評論，澄清了問題），你已經在名稱容器周圍將margin設置爲0，並且name-bg class已被調整大小（它正在通過添加頂部/右/底部/左側座標進行更改）我將頂部/右側/左側/底部調整爲2或-2（見小提琴），這減少了背景div的大小。我也改變了定位到relative，所以當調整大小時，它仍然會出現在中間。

https://jsfiddle.net/RachGal/rhav95o1/：小提琴

我覺得這是更接近你在找什麼。

來源

2017-03-08 02:05:37

在第一張圖片中，我忘了關閉webkit模糊..實際上看起來不錯 –

這很整潔，但我需要的是背景圖片在.name div背後模糊，以及其他地方：/ – RedXTech

感謝所有的努力，但我並沒有真正看到那個小提琴上的模糊。 – RedXTech

模糊背後的div CSS

回答

相關問題