如何通过隐藏边框使文本透明？

Question

我做了一个英雄部分,内容与边框重叠.这是它的样子:

我想删除该灰色区域以使其透明并使背景可见.但正如你可以看到它在边界重叠.所以我不希望看到边界成为罢工.内容和图像是动态的,因此宽度可能会改变.

现场演示:在Codepen上

HTML

        <div class="wrap">
    <div class="border">
        <h1 class="hero-title">We make your website beautiyul & usable </h1>
  <span class="attr">— Citation, ABC Inc</span>
    </div>
        </div>  

CSS

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);

body {
  background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
  color:#FFF;
  font-family: "Playfair Display", Georgia, serif;
  background-size:cover;
}

.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:130px 20px;
}

.border {
  border:solid 10px #FFF;
  text-align:center;
}

.attr {
  position:relative;
  top:-45px;
  font-size:20px;
  display:block;
}

.hero-title {
  font-weight:700;
  font-size:90px;
  text-align:center;
  margin:0 50px;
  padding:0;
  position:relative;
  top:-75px;
  background:#8b8b8b;
  display:inline-block;
}

现场演示:在Codepen上

寻找仅限CSS的解决方案.任何帮助,将不胜感激.提前致谢.

Answer 1

要删除灰色区域，请更改background:#8b8b8b;为background:transparent;。

由于涉及重叠，您可能应该添加

.border{ padding-top: 20px; }

将值 20px 更改为您的自定义值。