Question

我想要那些“白痴”的部分让图像变得模糊。

我尝试使用伪元素:: after和:: before来添加叠加层，但只能模糊叠加层。

尝试使用border第二个示例codepen，但没有成功，因为透明它会创建一个“square”。

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>

我只想模糊白色线性渐变

背后的图像部分

Answer 1

您可以使用剪辑路径。这个想法是有两个相似的图层，顶部带有剪辑路径，只显示所需的部分，并保持底层的模糊可见。如果要模糊中间部分，可以在两个元素之间切换模糊：

＆＃13;

.hero-image {
  width: 600px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.hero-image:after,
.hero-image:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-image:after {
  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');
  z-index: -2;
  filter: blur(2px);
}

.hero-image:before {
  /* Here we can delete all the gradient and keep only the image*/
  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');
  z-index: 2;
  -webkit-clip-path: polygon(37% 0, 93% 0, 70% 99%, 16% 100%);
   clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
    
}

＆＃13;

<div class="hero-image"></div>

＆＃13;

Answer 2

我确定有人可以稍微改进这种方法，但主要的要点是：

将图像包含在容器元素中两次。
堆叠两张图片。
模糊一个并将其放在底部。
使用顶部图片上的clip-path显示非模糊区域。
在两个图像之间插入一个带有容器元素的伪元素的霜层（透明白色）。
使用定位和z-index控制分层。

＆＃13;

.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%);
}

＆＃13;

<div class="img-overlay">
  <img src="http://unsplash.it/400/400?image=16">
  <img src="http://unsplash.it/400/400?image=16">
</div>

＆＃13;

CSS - 图像与覆盖/背景模糊对角线

2 个答案: