CSS - 带有覆盖/背景模糊对角线的图像答案

【问题标题】：CSS - image with overlays/background blurred diagonalCSS - 带有覆盖/背景模糊对角线的图像
【发布时间】：2018-02-13 19:19:06
【问题描述】：

我希望“变白”的部分使图像模糊。

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

尝试使用边框第二个示例代码笔，但没有成功，因为透明它会创建一个“正方形”。

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>

我只想模糊白色线性渐变“后面”的图像部分

【问题讨论】：

我编辑了我的答案，因为一开始我理解它很糟糕；）

标签： css background-image css-filters

【解决方案1】：

我相信有人可以稍微改进一下这种方法，但主要的收获是：

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

.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>

【讨论】：

就像我做的一样，不是吗？ :)
它们非常相似。当你删除你的帖子时，我开始了我的帖子。我走了很短的时间，完成并出版。刷新页面后，您已更新答案并取消删除它。主要区别在于如何包含图像（<img> vs background-image）以及如何创建颜色叠加层（伪元素 vs linear-gradient）。
由于该方法，将选择此作为最佳答案。只能投票给对方。

【解决方案2】：

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

.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: center/cover no-repeat;
  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://picsum.photos/id/1024/800/800');
}

.hero-image:before {
  filter: blur(4px);
}

.hero-image:after {
  clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
}

&lt;div class="hero-image"&gt;&lt;/div&gt;

【讨论】：