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

如何在边框上插入背景透明的文本

---

使用了

：在
之前和
：在
伪
类之后。
正文{
背景色：红色；
}
.边界{
高度：120px；
宽度：400px；
边框：2件纯黑；
位置：相对位置；
利润率：40像素
}
.边界：之前{
内容：“我的标题”；
宽度：180px；
/*边框：1px实心*/
位置：绝对位置；
文本对齐：居中；
顶部：-10px；
背景色：红色；
左：50%；
转化：translateX（-50%）；
}
.边界：之后{
内容：“我的页脚标题”；
宽度：180px；
/*边框：1px实心*/
位置：绝对位置；
文本对齐：居中；
底部：-10px；
背景色：红色；
左：50%；
转化：translateX（-50%）；
}
使用了
:before
和
:before
类。
正文{
背景色：红色；
}
.边界{
高度：120px；
宽度：400px；
边框：2件纯黑；
位置：相对位置；
利润率：40像素
}
.边界：之前{
内容：“我的标题”；
宽度：180px；
/*边框：1px实心*/
位置：绝对位置；
文本对齐：居中；
顶部：-10px；
背景色：红色；
左：50%；
转化：translateX（-50%）；
}
.边界：之后{
内容：“我的页脚标题”；
宽度：180px；
/*边框：1px实心*/
位置：绝对位置；
文本对齐：居中；
底部：-10px；
背景色：红色；
左：50%；
转化：translateX（-50%）；
}
让我们尝试以下代码：

<div class="border">
  <div class="border_box_left"></div>
  <div class="border_box_right"></div>
</div>

<style>
.border {
  height: 120px;
  width: 400px;
  position: relative;
  margin: 40px
}
.border:before {
  content: "My Header title";
  width: 180px;
  position: absolute;
  text-align: center;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border:after {
  content: "My Footer title";
  width: 180px;
  position: absolute;
  text-align: center;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border_box_left {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  left: 0px;
  top: 0px;
  border: 2px solid red;
  border-right: none;
}
.border_box_right {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  right: 0px;
  top: 0px;
  border: 2px solid red;
  border-left: none;
}
</style>


.边界{
高度：120px；
宽度：400px；
位置：相对位置；
利润率：40像素
}
.边界：之前{
内容：“我的标题”；
宽度：180px；
位置：绝对位置；
文本对齐：居中；
顶部：-10px；
左：50%；
转化：translateX（-50%）；
}
.边界：之后{
内容：“我的页脚标题”；
宽度：180px；
位置：绝对位置；
文本对齐：居中；
底部：-10px；
左：50%；
转化：translateX（-50%）；
}
.边框(左){
位置：绝对位置；
内容：“；
宽度：30%；
身高：100%；
左：0px；
顶部：0px；
边框：2倍纯红；
边界权：无；
}
.border_box_右{
位置：绝对位置；
内容：“；
宽度：30%；
身高：100%；
右：0px；
顶部：0px；
边框：2倍纯红；
左边界：无；
}

要生成动态边框，然后使用脚本计算内容宽度，并将宽度指定给border\u box\u left和border\u box\u right。
让我们尝试以下代码：

<div class="border">
  <div class="border_box_left"></div>
  <div class="border_box_right"></div>
</div>

<style>
.border {
  height: 120px;
  width: 400px;
  position: relative;
  margin: 40px
}
.border:before {
  content: "My Header title";
  width: 180px;
  position: absolute;
  text-align: center;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border:after {
  content: "My Footer title";
  width: 180px;
  position: absolute;
  text-align: center;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.border_box_left {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  left: 0px;
  top: 0px;
  border: 2px solid red;
  border-right: none;
}
.border_box_right {
  position: absolute;
  content: "";
  width: 30%;
  height: 100%;
  right: 0px;
  top: 0px;
  border: 2px solid red;
  border-left: none;
}
</style>


.边界{
高度：120px；
宽度：400px；
位置：相对位置；
利润率：40像素
}
.边界：之前{
内容：“我的标题”；
宽度：180px；
位置：绝对位置；
文本对齐：居中；
顶部：-10px；
左：50%；
转化：translateX（-50%）；
}
.边界：之后{
内容：“我的页脚标题”；
宽度：180px；
位置：绝对位置；
文本对齐：居中；
底部：-10px；
左：50%；
转化：translateX（-50%）；
}
.边框(左){
位置：绝对位置；
内容：“；
宽度：30%；
身高：100%；
左：0px；
顶部：0px；
边框：2倍纯红；
边界权：无；
}
.border_box_右{
位置：绝对位置；
内容：“；
宽度：30%；
身高：100%；
右：0px；
顶部：0px；
边框：2倍纯红；
左边界：无；
}

要生成动态边框，然后使用脚本计算内容宽度，并为边框框左和边框框右指定宽度。
这仅适用于实心背景，背景中有图案时如何？这仅适用于实心背景，背景中有图案时如何？我不确定这是否适用于透明背景。您可以尝试使用
字段集
和
图例
，但我认为您无法在HTML5中定位
图例
，我不确定这在透明背景下是否可行。您可以尝试使用
字段集
和
图例
，但我认为您无法在HTML5中定位
图例
，这是为methis解决的，为methis解决的