我想要完成的是为标题制作磨砂玻璃效果。标题具有白色背景和黑色文本,并且是固定的。这个想法是,该标题后面的内容(向下滚动时)以磨砂玻璃效果显示。
我通过将标题的不透明度更改为 0.9 取得了部分成功,但我无法使模糊效果(通过滤镜)发挥作用。有人知道我必须改变什么吗?这是我的代码:
html,
body {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
color: black;
}
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
main {
width: 100%;
background: lightblue;
section {
padding: 80px;
}
h1 {
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
}
.outer-header {
// background-repeat: no-repeat;
// background-attachment: fixed;
// background-size: cover;
// background-position: top;
// background-image: url(https://4bp.blogspot.com/-1f1sdfix3dy/Uh92eZAQ90I/AAAAAAAAHM4/5oiB4zC_tQ4/s1600/Photo-Background-White4.jpg);
background: white;
height: 80px;
position: sticky;
top: 0px;
left: 0px;
opacity: 0.9;
overflow: hidden;
z-index:4;
&::after {
z-index: -1;
content: "";
background: inherit;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
// filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
}
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
img {
height: 50px;
cursor: pointer;
object-fit: cover;
}
h1 {
position: relative;
}
.logo-text {
font-size: 33px;
position: absolute;
left: 50px;
top: 6px;
}
nav,
ul {
display: flex;
grid-column-gap: 20px;
justify-items: end;
align-items: center;
}
<div class="outer-header">
<header>
<h1>
<img src="https://source.unsplash.com/random/287x287" />
<span class="logo-text">Company</span>
</h1>
<nav>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</nav>
</header>
</div>
<main>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
<section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section> <section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section> <section>
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
sit. Repellat quia deleniti enim in.
</p>
</section>
</main>
最佳答案
您正在寻找(仍处于试验阶段)backdrop-filter
属性(property)。然而,browser support还是有点稀缺。对于 Firefox,它将在即将推出的版本 70 中以开发者旗帜登陆。 Safari 仍然需要 -webkit-
供应商前缀。但您可以在当前版本(76+)的 Chrome 中测试此工作示例。
body {
background: url(http://placekitten.com/800/600) no-repeat;
}
#overlay {
width: 50vw;
height: 50vh;
background: rgba(255,255,255,0.4);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
<div id="overlay"></div>
关于html - 如何为滚动标题制作磨砂玻璃效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58309021/