在本教程中，我们将介绍如何使用CSS滤镜将模糊效果应用于图像，以及如何将这些效果限制在特定的图像区域。
几天前，我们发布了团队组件。它带有一个 – 模糊的img变体，团队名称背后的区域模糊不清。我认为分享创造这种效果的过程会很有趣。
我们开工吧！
我已经整理了一个视频教程，详细解释了如何创建模糊效果。
我们在本教程中构建的组件基于CodyHouse框架。
效果背后的想法如下：我们需要复制团队成员的图像，然后我们必须将CSS模糊过滤器应用于此副本和掩码，以便只有部分图像可见。
我们使用::before元素的伪元素在CSS中创建图像的副本.team__caption：
.team–blurred-img {
.team__caption {
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../../assets/img/img-01.jpg');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
filter: blur(8px);
transform: scale(1.1);
}
}
.team__name {
background: alpha(var(–color-black), 0.6);
padding: var(–space-sm);
z-index: 1;
}
}
通过设置background-position: center bottom;和background-size: 100% auto;，我们确保图像的副本与原始团队成员图像完美重叠。
通过使用他们的ID定位每个团队成员卡，我们可以为每个成员设置不同的图像。
.team–blurred-img {
// …
#james {
.team__caption::before {
background-image: url('../../assets/img/img-01.jpg');
}
}
#emily {
.team__caption::before {
background-image: url('../../assets/img/img-02.jpg');
}
}
#mathew {
.team__caption::before {
background-image: url('../../assets/img/img-03.jpg');
}
}
#olivia {
.team__caption::before {
background-image: url('../../assets/img/img-04.jpg');
}
}
}
因为我们的目标是.team__caption，所复制的图像仅限于该区域，我们不需要额外的技巧来剪切图像。此外，我们已经应用于overflow: hidden此元素，以便在子元素超出其父元素大小时剪切子元素。
应用模糊滤镜时，您会注意到边缘是半透明的。我们可以通过使用::after伪元素创建图像的附加副本，并通过::before缩放变换增加元素的大小来解决此问题：
.team–blurred-img {
.team__caption {
overflow: hidden;
&::before, &::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
filter: blur(8px);
}
&::before {
transform: scale(1.1);
}
}
#james {
.team__caption::before,
.team__caption::after {
background-image: url('../../assets/img/img-01.jpg');
}
}
#emily {
.team__caption::before,
.team__caption::after {
background-image: url('../../assets/img/img-02.jpg');
}
}
#mathew {
.team__caption::before,
.team__caption::after {
background-image: url('../../assets/img/img-03.jpg');
}
}
#olivia {
.team__caption::before,
.team__caption::after {
background-image: url('../../assets/img/img-04.jpg');
}
}
.team__name {
background: alpha(var(–color-black), 0.6);
padding: var(–space-sm);
z-index: 1;
}
}
（可选）您可以定位支持backdrop-filter属性的浏览器，并使用此替代技术仅使用一行代码创建相同的效果。不幸的是，目前支持不是很好，所以我们决定包括这两种方法。
@supports (backdrop-filter: blur(10px)) {
.team–blurred-img .team__caption {
backdrop-filter: blur(10px);
&::before, &::after {
display: none;
}
}
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261546.html