如何保持容器內的CSS背景圖像模糊？

Question

當我模糊圖像時，它會溢出父容器，甚至指定要隱藏的溢出。 有沒有辦法將模糊的邊緣保持在尺寸內？

圖像需要是css背景而不是標簽內部

示例不起作用：

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

Answer 1

它可以通過對子元素應用margin並overflow:hidden到父元素來實現。

.box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
    height:300px;
    width:300px;
}

在這里查看示例： http ： //jsfiddle.net/n1ck/tMjsJ/5/

正如Joshua指出的那樣，它與此處使用的技術相同： 使用CSS3濾鏡模糊定義的邊緣

Answer 2

所以，顯然，這似乎不適用於背景圖像。 非常有趣的發現:)這里展示了一個類似但不精確的帖子：

使用CSS3濾鏡模糊定義的邊緣

我想如果你想要達到同樣的效果，嘗試使用帶有背景圖像的div更改為圖像本身，使用100％的寬度/高度。

編輯：查看@ N1ck的答案。 應用負邊距（甚至-1px）工作似乎會觸發正確的效果。 尼斯。

另外 - 為了避免出血背景顏色（白色），或至少更好地管理它，請嘗試設置除圖像之外的背景顏色。