如何用透明PNG遮罩边框？求高浏览器兼容性方案

嘿，我明白你的困扰——想用伪元素实现边框和Logo，但Logo没法自然遮住边框对应区域的问题确实挺头疼的。你说的没错，直接用单个伪元素做完整边框的话，确实很难实现这种“挖空”效果，尤其是要兼顾浏览器兼容性的话。

给你几个兼容性拉满的思路，都是不用依赖新特性就能落地的：

思路1：拆分边框为四个独立部分（最推荐，全浏览器兼容） #

放弃用单个伪元素做完整边框，转而用四个独立元素（或伪元素）分别实现上、右、下、左四条边框，然后让这些边框主动避开Logo所在的区域。这样Logo可以直接放在边框上方，既不会被挡住，边框也能在Logo位置自然断开。

修改后的代码示例：

CSS #

.hero-banner {
  width: 100%;
  height: 40vw;
  background-image: url('https://i.imgur.com/Ft1XsIn.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden; /* 防止边框溢出容器 */
}

.hero-banner h1 {
  color: #fff;
  position: absolute;
  top: 40%;
  left: 200px;
  z-index: 2; /* 确保文字在最上层 */
}

/* 上边框：避开Logo的宽度 */
.hero-banner::before {
  content: "";
  position: absolute;
  top: 70px;
  left: 70px;
  right: calc(70px + 300px); /* 右边留出Logo的宽度+边距 */
  height: 1px;
  background-color: #fff;
}

/* 右边框 */
.hero-banner::after {
  content: "";
  position: absolute;
  top: 70px;
  right: 70px;
  bottom: 70px;
  width: 1px;
  background-color: #fff;
}

/* 下边框 */
.hero-banner .border-bottom {
  position: absolute;
  bottom: 70px;
  left: 70px;
  right: 70px;
  height: 1px;
  background-color: #fff;
}

/* 左边框 */
.hero-banner .border-left {
  position: absolute;
  top: 70px;
  bottom: 70px;
  left: 70px;
  width: 1px;
  background-color: #fff;
}

/* Logo元素 */
.hero-banner .logo {
  position: absolute;
  top: 10px;
  right: 150px;
  height: 122px;
  width: 300px;
  background-image: url('http://www.technozion.org/tz15/assets/mat/images/generic-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1; /* 让Logo在边框上方 */
}

HTML #

<div class="hero-banner">
  <h1><small>The Story of</small><br/>This House</h1>
  <div class="border-bottom"></div>
  <div class="border-left"></div>
  <div class="logo"></div>
</div>

这个方案的优势是兼容所有现代浏览器和旧版IE，只用到了基础的定位和背景属性，没有任何前沿特性依赖。你只需要根据Logo的实际尺寸，调整上边框的right值，就能让边框完美避开Logo区域。

思路2：调整伪元素层叠顺序（仅适合不透明Logo） #

如果你的Logo是完全不透明的（比如带有纯色背景），可以直接调整两个伪元素的层级，让Logo覆盖在边框上方：

修改原CSS的伪元素部分：

.hero-banner::before {
  content: url('http://www.technozion.org/tz15/assets/mat/images/generic-logo.png');
  position: absolute;
  top: 10px;
  right: 150px;
  height: 122px;
  width: 300px;
  z-index: 2; /* 把Logo放到边框上方 */
  /* 如果Logo有透明区域，这里加背景色会挡住下方背景图，所以仅适合不透明Logo */
  /* background-color: #对应背景色; */
}

.hero-banner::after {
  content: "";
  position: absolute;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  border: 1px solid #fff;
  z-index: 1; /* 边框在Logo下方 */
}

这个方案更简洁，但局限性也很明显——如果Logo有透明区域，下方的边框会透出来，破坏视觉效果。

思路3：使用Clip-path（适合现代浏览器） #

如果不需要兼容旧版IE，你可以用clip-path给边框伪元素裁剪出Logo的位置，让边框在对应区域自动断开：

.hero-banner::after {
  content: "";
  position: absolute;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  border: 1px solid #fff;
  /* 根据Logo的位置和尺寸调整裁剪坐标 */
  clip-path: polygon(0 0, calc(100% - 300px) 0, calc(100% - 300px) 60px, 100% 60px, 100% 100%, 0 100%);
}

.hero-banner::before {
  content: url('http://www.technozion.org/tz15/assets/mat/images/generic-logo.png');
  position: absolute;
  top: 10px;
  right: 150px;
  height: 122px;
  width: 300px;
  z-index: 1;
}

不过clip-path在IE中完全不支持，所以如果你的项目需要兼容旧浏览器，还是优先选择思路1。

总结一下，最稳妥的方案是思路1，兼容性和效果可控性都拉满，完全能实现你示意图里的效果。

内容的提问来源于stack exchange，提问作者mcseay