Html 具有透明背景的div边框上的文本

如何在

边框div

上放置一些文本，使文本具有与后面图像匹配的

透明背景

问题是
背景图像
有一些形状和多种颜色，因此我不能只在文本中添加一些背景颜色，因为它不适合

例如：


html，
身体{
宽度：100%；
身高：100%；
}
身体{
保证金：0；
背景：url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg);
}
#主要{
边缘顶部：100px；
-webkit边界半径：20px；
-moz边界半径：20px；
边界半径：20px；
边框：1px实心#000000；
}
#主氢{
字体大小：60px；
字号：700；
文本对齐：居中；
利润率：-40px0；
背景：透明；/*以某种方式删除文本后面的边框*/
填充：0 20px；
}

明星球员

福
酒吧

您可以使用字段集而不是div：

HTML:

您可以使用字段集而不是div：

HTML:

所以你想在文本后面两层看到一件事，但不想看到介于两者之间的另一件事……这本身就相当违反直觉。除非你使用边框图像和css渐变，否则你不确定你是否能做到这一点，因为它总是有点复杂，而且这并不取决于文本的大小/宽度

e、 g

HTML

h2{字体大小：1.2em；文本对齐：居中；页边距顶部：-10px；}
.内部{高度：150px；宽度：100%；边框底部：2px实心#000；边距底部：-2px；}


这已经在CHROME上完成了-您需要为其他浏览器添加正确的边框图像标记（-moz border image，等等）。这只是CSS3。
因此，您希望在文本后面两层看到一件事，但不希望看到介于两者之间的另一件事……这本身就相当违反直觉。除非你使用边框图像和css渐变，否则你不确定你是否能做到这一点，因为它总是有点复杂，而且这并不取决于文本的大小/宽度

e、 g

HTML

h2{字体大小：1.2em；文本对齐：居中；页边距顶部：-10px；}
.内部{高度：150px；宽度：100%；边框底部：2px实心#000；边距底部：-2px；}


这已经在CHROME上完成了-您需要为其他浏览器添加正确的边框图像标记（-moz border image，等等）。这只是CSS3。
@downvoter如果这是一项简单的任务，请随时发布答案。也许是这样@Dmitry这是一个很好的解决方案，但正如我所能看到的，它不想在FF中对齐
文本？FF工作-图例-对齐：center@Dmitriy
align
是否已弃用？@downvoter如果这是一项简单的任务，请随意发布答案。也许是这样@dmitry这是一个很好的解决方案，但正如我所知，它不想在FF中进行
text align
？FF工作-图例-对齐：center@Dmitriy
align
是否已弃用？将放置“内部”div以添加实心底部边框，如果没有它，底部边框将看起来像顶部边框。也许可以将梯度改为径向或其他方式来避免这种情况，但这会变得非常棘手。希望能让你走上正轨。哦，抱歉，这样你就不会得到圆角。哦，或者像@KittMedia所说的那样使用字段集……最好的答案是，“内部”div用于添加坚实的底部边框，没有它，底部边框看起来就像顶部一样。也许可以将梯度改为径向或其他方式来避免这种情况，但这会变得非常棘手。希望能让你走上正轨。哦，对不起，这样你就不会走弯路了。哦，或者像@KittMedia所说的那样使用fieldset……最好的答案。最好的，直截了当的答案。这个解决方案解决了我的问题，tnx。最好的，直截了当的回答。好这个解决方案解决了我的问题，tnx。
<fieldset>
    <legend>Test</legend>
</fieldset>

legend {
    text-align: center;
    width: 100%;
}

<div class="gradborder-box"><div class="inner"><h2>Hello WORLD</h2></div></div>

.gradborder-box{
margin: auto;
  width: 350px;

  background: transparent;
  border: 2px solid transparent;

  -webkit-border-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
  border-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
  border-image-slice: 1;
}