是否可以使用-webkit-filter：blur（）; 在背景图像上？

Z时代
2024-01-10
分类：问答

是否可以-webkit-filter: blur();在背景图片上使用？

我已经试过了这段代码，它只是模糊了除背景图像之外的所有内容：

body {
  background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg');
  background-attachment: fixed;
  -webkit-filter: blur(5px);
}

我已经搜索了一段时间，但是找不到任何描述该操作方法的资源。

回答：

如果您正在寻找不依赖额外标记的解决方案，则可以将背景图像应用到主体上的伪元素并进行过滤。

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(http://lorempixel.com/420/255);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}