html - 模糊背景图像css的一部分

Question

<分区>

Answer 1

您可以在该菜单栏顶部创建一个伪元素(使用 ::before ；或者您可以创建一个常规元素，但这更麻烦)，高度为 70px，宽度为 100%(模糊面积大小)。然后，您可以将其背景设置为与菜单栏相同，但模糊。

html, body {
    height: 100%;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
}
div::before {
    content: ' ';
    display: block;
    width: 100%;
    height: 70px;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
}

<div></div>

更改图像以显示更好的模糊效果

注意:由于模糊算法的缘故，边缘没有那么模糊，但它很小

参见 working example在 JSfiddle 上。

---

应要求，here是创建“锐利”模糊区域边缘的解决方案。

它更复杂，需要你定义第二个 <div>并在 内部 内部 创建一个模糊背景 <div> .但是里面的伪元素<div>比内部div大，所以杂乱的边框会被隐藏。解释起来有点难，看例子吧。