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

＆＃13;

svg {
  border: 1px solid black;
  background: #EB8A1C;
}

text {
  font-size: 30px;
  font-weight: bold;
}

＆＃13;

<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>

＆＃13;

还有另一种方法可以解决重叠元素，这些元素具有position: absolute和固定height，最重要的部分是overflow: hidden上的span＆＃39}

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 2

这在webkit中很容易，正如我在上面的评论中所提到的，这要归功于非标准的-webkit-text-fill-color。但它在非webkit浏览器中比较棘手。

您可以使用SVG linearGradient来实现相同的效果。这似乎在我测试的所有内容中都很好用：

body {
  background: orange;
}

.svg_text, h1 {
  font-size: 72px;
  font-weight: bold;
  margin: 0;
}

/* webkit-only ... */
.fancy {
  background: #8bed89;
  background: -moz-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  background: -webkit-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  background: linear-gradient(to bottom, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h4>Webkit only...</h4>

<h1 class="fancy">
  filosofia
</h1>

<h4>Others...</h4>

<svg height="60" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="45%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="50%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="55%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(139,237,137); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="0" y="50" fill="url(#gradient)" class="svg_text">
    filosofia
  </text>
</svg>

Answer 3

我就这样做了：

.container h1 {
  text-align: center;
  padding-top: 40px;
  font-size: 400%;
  background: -webkit-linear-gradient(#2CDB1D 68%, white 70%, #2CDB1D 0%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Here is the JSFiddle demo

Answer 4

在H1元素中添加一个类。

<h1 class="strike">....</h1>

然后添加你的CSS：

.strike{
text-decoration: white line-through;
}

CSS中间带有白线的文字

4 个答案: