Question

我希望用css创建此效果：https://i.stack.imgur.com/zpzVC.png

由于我不知道如何调用此效果，因此我无法在线找到解决方案而且不幸的是我无法让它自行运行。

对于不同尺寸的不同标题，效果会重复几次。边界应从第一个字母的一半开始。

谁能帮帮我？

Answer 1

我将在span元素上使用:after伪类来完成此任务。

body {
   background: #3E9CE2;
   color: white;
   font-family: sans-serif;
} /* Just for looks */
   
h1 span {
   position: relative;
   display: inline-block;      
}

h1 span:after {
   position: relative;
   display: block;
   content: "";
   background: #DE2F2D;
   z-index: -5;

   height: 22px;
   top: -19px;
   left: 7px;       
}

<h1>This is our <span class="offset-background">showcase</span></h1>

span本身的位置和显示属性可确保:after元素正确定位（直接位于span下方），且宽度与文本相同。

伪元素必须定义其高度和位置偏移量，以及负z-index以确保它在文本后面绘制。

Answer 2

以下是您正在寻找的示例。我使用的解决方案是在文本周围偏移一个框，并以相同的数量负向偏移文本。

＆＃13;

h1 span { position: relative; display: inline-block; }
.blue-sq{
  background-color:blue;
  display:inline-block;
}
.offset-red{
  position:relative;
  top:22px;
  background-color:red;
  height:18px;
}
.inner-text{
  position:relative;
  top:-22px;
  left:-6px;
}

＆＃13;

<div class="blue-sq">
  <h1>View our 
    <span class="offset-red">
      <span class="inner-text">showcase</span>     
    </span>
      
    </h1>
</div>

＆＃13;

文本背后/边框（CSS）

2 个答案: