我希望“变白”的部分使图像模糊。
我尝试使用伪元素::after 和::before 添加叠加层,但只能模糊叠加层。
尝试使用边框第二个示例codepen,但没有成功,因为使用透明它创建了一个“正方形”。
https://codepen.io/giventofly/pen/RQpqYZ
.hero-image {
width: 1280px;
height: 800px;
background-image: linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
url('https://cdn.vox-cdn.com/thumbor/NU6lcSN3DGmjF7NhZp6ixY3HxgQ=/0x0:1620x1080/1200x800/filters:focal(0x0:1620x1080)/cdn.vox-cdn.com/uploads/chorus_image/image/46510678/Tarmogoyf_DGM_1920x1080_Wallpaper.0.0.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}
<div class="hero-image"></div>
我只想模糊图像中白色线性渐变“后面”的部分
最佳答案
我确信有人可以稍微改进这种方法,但主要要点是:
- 在容器元素中包含两次图像。
- 堆叠两个图像。
- 模糊其中一个并将其放在底部。
- 在顶部图像上使用
clip-path
显示非模糊区域。 - 在两个图像之间插入带有容器元素伪元素的霜层(透明白色)。
- 通过定位和 z 索引控制分层。
.img-overlay {
display: inline-flex;
position: relative;
overflow: hidden;
}
.img-overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba( 255, 255, 255, 0.5 );
z-index: 1;
}
.img-overlay img:first-child {
position: absolute;
top: 0;
left: 0;
filter: blur( 3px);
z-index: 0;
}
.img-overlay img:last-child {
position: relative;
z-index: 2;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
<div class="img-overlay">
<img src="http://unsplash.it/400/400?image=16">
<img src="http://unsplash.it/400/400?image=16">
</div>
关于CSS - 具有覆盖/背景模糊对 Angular 线的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48774095/