html - 带有剪辑路径的模糊图像边框效果

Question

是否可以像这个 picture 那样用模糊的图像边框覆盖文本？问题是图片包含在梯形元素中。我正在阅读有关 clip-path 的内容，并想通过插入 box-shadow 来获得这种透明边框效果，但它不起作用，我不知道该怎么做解决这个问题。

Answer 1

clip-path 在大多数浏览器中没有得到很好的支持 (see this resource)

使用图形程序创建那种效果，然后将所有图层堆叠在一起。我使用的是 Photoshop，但您可以使用任何其他可以使用 alpha channel 保存 PNG 的图形程序(例如 GIMP)

这里是一步一步的说明:

1. 双击Layers 窗口中的锁，打开您的图像并解锁背景层。然后加个面具
   
2. 为你的蒙版添加渐变
   
3. 将您的 Web 图片保存为 PNG-24 或带 Alpha channel 的 PNG。确保选中 Transparency
   

现在进入代码部分:

.Header {
  position: relative;
  max-width: 488px;
  height: 200px;
  
  /* just some font stuff */
  font: 2.5em sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.Header > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.Header-layer1 {
  z-index: 1;
}

.Header-layer1 span {
  position: absolute;
  left: 150px;
  top: 50px;
}

.Header-layer2 {
  background: url( /image/f9fIM.png ) no-repeat left top;
  z-index: 2;
}

.Header-layer3 {
  z-index: 3;
}

.Header-layer3 span {
  position: absolute;
  left: 175px;
  top: 70px;
  color: #ede8d7;
  text-shadow: 1px 1px 10px rgba( 0, 0, 0, .05 );
}

<div class="Header">
  <div class="Header-layer1">
    <span>Some</span>
  </div>
  <div class="Header-layer2">
    <!-- we add the background image to this layer with CSS -->
  </div>
  <div class="Header-layer3">
    <span>text here</span>
  </div>
</div>

Image credit