html - 中间 CSS 中带有白线的文本

Question

我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle

.container{
  height:200px;
  width:400px;
  background-color:#EB8A1C;
}

.container h1{
  color:#2CDB1D;
  text-align: center;
  padding-top:40px;
  font-size:400%;
}

<div class="container">
  <h1> filosofia </h1>
</div>

Answer 1

你可以用 SVG 做到这一点和 Linear Gradient .这是另一个 Demo

svg {
  border: 1px solid black;
  background: #EB8A1C;
}

text {
  font-size: 30px;
  font-weight: bold;
}

<svg width="250px" height="50px">
  <defs>
    <linearGradient id="textGradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#A5DE4A" />
      <stop offset="45%" stop-color="#A5DE4A" />
      <stop offset="50%" stop-color="white" />
      <stop offset="60%" stop-color="#A5DE4A" />
      <stop offset="100%" stop-color="#A5DE4A" />
    </linearGradient>
  </defs>

  <text fill="url(#textGradient)" x="0" y="35">LOREM IPSUM</text>
</svg>

还有另一种方法可以对具有 position: absolute 的重叠元素执行此操作并修复了 height最重要的部分是overflow: hidden在 span的

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

.text {
  width: 200px;
  height: 50px;
  padding: 10px;
  background: #EB8A1C;
  color: white;
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

span {
  font-size: 45px;
  left: 20px;
  position: absolute;
  overflow: hidden;
}

span:nth-child(1) {
  color: #A5DE4A;
  height: 50;
}

span:nth-child(2) {
  color: white;
  height: 33px;
}

span:nth-child(3) {
  color: #A5DE4A;
  height: 29px;
}

<div class="text">
  <span>filosofia</span>
  <span>filosofia</span>
  <span>filosofia</span>
</div>