这适用于固定在顶部且主体的其余部分在其下方滚动的网站标题。
到目前为止,我设法让透明度发挥作用;但是,我确实想模糊标题的背景,因此当其余内容在其下方滚动时,内容看起来很模糊。这可能吗?
我试图实现的外观就像在 iOS 7 上一样。它们的新工具栏具有相同的效果。
#headerWrapperBackground {
width: 100%;
height: 100px;
z-index: 9998;
position: fixed;
background-color: #222;
background-color: rgba(34, 34, 34, 0.95);
}
#headerWrapper {
background-color: transparent;
margin: auto;
text-align: center;
position: fixed;
z-index: 9999;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 3px;
}
最佳答案
试试这个
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="gray" filter="url(#f1)" />
</svg>
关于具有透明度的 CSS 模糊背景(就像在 iOS7 中一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23925792/