模糊图像边框效果与剪辑路径

Question

是否可以覆盖模糊图像边框的文字，例如picture？问题是图片包含在梯形元素中。我正在阅读有关clip-path的内容，并希望通过插入box-shadow来实现这一透明边框效果，但它不起作用，我不知道如何解决这个问题。

Answer 1

大多数浏览器(see this resource)

都不支持

clip-path

使用图形程序创建这种效果，然后将所有图层堆叠在一起。我使用过Photoshop，但您可以使用任何其他可以使用Alpha通道保存PNG的图形程序（例如GIMP）

这里有一步一步的说明：

1. 双击Layers窗口中的锁，打开图像并解锁背景图层。然后添加一个面具
   
2. 为面具添加渐变
   
3. 使用Alpha通道将图像保存为PNG-24或PNG。确保已选中Transparency

现在到代码部分：

＆＃13;
＆＃13;
.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( https://i.stack.imgur.com/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 );
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Image credit