如何在CSS中创建剪裁的模糊背景图像

在本教程中,我们将介绍如何使用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; } } }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 如何在CSS中创建剪裁的模糊背景图像
分享到:
赞(0)
广告位820*80