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

我制作了一个英雄部分，内容与边界重叠。下面是它的样子：

我想删除灰色区域，使其透明并使背景可见。但正如你所看到的，它在边界上重叠。所以我不想看到边境被突袭。内容和图像是动态的，因此宽度可能会改变

现场演示：

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唯一的解决方案。任何帮助都将不胜感激。提前感谢。

要删除灰色区域更改

背景：#8b至
背景：透明

对于重叠，您可能应该添加

.border{
填充顶部：20px；
}

将值20px更改为自定义值。
我在css中做了更改，最终的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;
    position:relative;
}
.attr {
    top:-45px;
    font-size:20px;
    display:block;
}
.hero-title {
    font-weight:700;
    font-size:90px;
    text-align:center;
    margin:0 50px;
    padding:0;
    top:-75px;
    display:inline-block;
}

在这里查看演示-

我只是用div“伪造”了上边框

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



.border-top{
   width:50px;
   height: 10px;
   background-color: #fff;
   float:left;
}
.border-top.right{
  float:right;
}


我们使您的网站美观实用
-引证，ABC公司
.边框顶部{
宽度：50px；
高度：10px；
背景色：#fff；
浮动：左；
}
.右上角{
浮动：对；
}
您可以使用弹性盒获得响应性强的上边框。当然，如果文本包裹，则边框的长度将是最小的。但是如果你的文本很短，它们会扩展以占用可用空间

下面是我在css中添加/更改的内容。看看它在行动上

为了使顶部边框响应文本，我添加了一个伪元素，并获得带有阴影的边框。我们需要事先设置文本宽度的下限

如果这个宽度太小，我们可能需要使用多个阴影

在我的示例中，我设置了4个阴影，但如果需要，可以设置更多阴影

由于顶部边框现在是伪造的，我需要在侧面边框（背景）上使用替代品


正文{
背景：url（'https://source.unsplash.com/category/nature“）无重复中心#333；
颜色：#FFF；
字体系列：“Playfair显示器”，佐治亚州，衬线；
背景尺寸：封面；
}
.包裹{
最大宽度：1200px；
保证金：0自动；
填充：70px 20px；
}
.边界{
边际上限：0px；
边框底部：实心10px白色；
文本对齐：居中；
溢出：隐藏；
背景图像：线性渐变（白色，白色），线性渐变（白色，白色）；
背景尺寸：10px钙（100%-70px），10px钙（100%-70px）；
背景位置：左下、右下；
背景重复：无重复；
}
艾特先生{
位置：相对位置；
顶部：-45px；
字体大小：20px；
显示：块；
}
.英雄头衔{
字号：700；
字体大小：90px；
文本对齐：居中；
边际：0.50px；
填充：0；
位置：相对位置；
顶部：0px；
显示：内联块；
}
.英雄头衔：之后{
内容：“；
位置：绝对位置；
高度：10px；
宽度：100%；
背景色：透明；
左：0px；
顶部：70像素；
盒影：200px 0px 0px 0px白色，400px 0px 0px 0px白色，-200px 0px 0px 0px白色，-400px 0px 0px白色；
}

我们做漂亮的网
Change
background:#8b至<代码>背景色：透明
rule@Anthony此时，边界将可见，就像删除线一样。我想避免这种情况。我之前使用的一个技巧是将h1的背景设置为背景图像，并将其定位为与其他背景对齐。如果这是一种你感兴趣的方法，你可以花一些时间在你的代码上，让它为你工作。是的。我也这么想。。但你认为它会有反应吗？你总能让它有反应。根据屏幕宽度改变时背景图像的反应，难度会有所不同。查看此网站的标题导航。每个导航项都有背景图像作为背景。他们身后的那条线是一条实线。如果在手机上观看，您需要请求桌面模式，因为手机上的导航不同：@Surjith S M-如果您对解决方案感到满意，您可以将其标记为答案，或者如果缺少某些内容，请告诉我，谢谢，我的意图是重叠顶部边框上的内容。不在里面。对不起，我的目的是重叠顶部边框上的内容。是否有可能适合内容的行（对于小文本）具有响应性？@SurjithSM Yes（？）不是您想要的短文本？当然。但是，当它的多行具有不同的宽度时，它不起作用。看这个：我想避免这种情况下的差距。有道理吗？是的，我知道你的意思。但我现在想不出一个办法来解决这个问题。如果文本换行，上边框将调整为最长的一行。@SurjithSM很抱歉再次打扰您。但在IE中不起作用。
<div class="border">
  <span class="border-top"></span>
   <span class="border-top right"></span>
        <h1 class="hero-title">We make your website beautiful & usable </h1>
  <span class="attr">— Citation, ABC Inc</span>
    </div>



.border-top{
   width:50px;
   height: 10px;
   background-color: #fff;
   float:left;
}
.border-top.right{
  float:right;
}

.wrap{
    padding: 130px 0; /* We will put a min-width on our lines */
}
.hero-title{
    display: flex;
    margin: -80px 0 0; /* margin + padding */
    position: static; /* We don't need relative and a top -xx */
    background: transparent;
}
.hero-title::before, .hero-title::after{
    display: block;
    content: "";
    height: 0;
    min-width: 60px;
    flex: 1;
    border-top: 10px solid red; /* to see what we're drawing here */
    margin-top: 75px; /* how much the text sticks out on top */
}
.hero-title::before{
    margin-right: 10px; /* We want to prevert our borders from touching the text */
}
.hero-title::after{
    margin-left: 10px;
}
.border{
    border-top-width: 0px;
    padding-top: 5px; /* anything > 0px */
}
.attr{
    position: static; /* We don't need relative and a top -xx */
    margin: 25px;
}