文本的透明删除线

Question

我需要使用CSS实现文本的透明删除线，这样我就不必用<img>标签替换<h1>标签。我已经成功使用CSS实现了文本的中划线，但是我无法使其透明。

期望效果：

我的代码：

body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
    display:inline-block;
}
h1:after{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    left:0; top:17px;
    background:#fff;
}

<h1>EXAMPLE</h1>

我如何实现透明删除线效果，使文本凸出并允许背景在此行中显示。

- Kael

---

这是一张图像，很可能是用Illustrator创建的，使用了剪贴蒙版来“切出”穿过文本的那条线，使您可以看到其背后的背景。无法在HTML和CSS中完成。 - MilkyTech

@ChrisM 即使“剪裁”效果通常无法通过CSS实现，但这个可以。 - web-tiki

@web-tiki 嗯，我猜从技术上讲，你用了一点“hack”的方法实现了它。你实际上是将单词写了两遍并截去了一部分。但我不明白为什么 line-height:0 会将文本向上推，并显示底部的一半而不是顶部的一半。 - MilkyTech

@ChrisM 嗯，这完全取决于您认为什么是黑客行为。根据我的实现，CSS/HTML 符合 W3 标准。对于只显示底部部分的文本，这是因为 line-height:0，它将文本垂直居中到容器的顶部，并且由于我在容器上设置了 overlow:hidden，因此只有文本的底部部分出现。 - web-tiki

啊哈！我得尝试一下line-height。这不是我经常使用的规则。我认为line-height:0会使它完全消失。显然情况并非如此。 - MilkyTech

@ChrisM，它并没有完全隐藏它，因为我设置了元素的高度。overflow:hidden; 属性根据高度而不是行高进行隐藏。 - web-tiki

Answer 1

你可以使用CSS的line-height和overflow:hidden;属性来实现文本的透明删除线。

演示: CSS透明删除线

输出:

---

解释：

1. 步骤1：使用height:0.52em; overflow:hidden;隐藏<h1>文本的底部，使用em单位使高度适应您在<h1>标记中使用的字体大小。
   fiddle
2. 步骤2：将内容“重写”到伪元素中，以最小化标记并防止内容重复。您可以使用自定义数据属性来保留所有内容在标记中，并且不必为每个标题编辑CSS。
   fiddle
3. 步骤3：将伪元素文本与顶部对齐，因此只显示底部，使用line-height:0;
   fiddle

---

相关代码：

body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
}
h1{
    font-family:arial;
    position:relative;
}
h1 span, h1:after{
    display:inline-block;
    height:0.52em;
    overflow:hidden;
    font-size:5em;
}

h1:after{
    content: attr(data-content);   
    line-height:0;
    position:absolute;
    top:100%; left:0;
}

<h1 data-content="EXAMPLE" ><span>EXAMPLE</span></h1>

---

SVG

另一种实现这种效果的方法是使用带有mask元素的SVG。 演示展示了这种方法，以下是相关代码：

*{margin:0;padding:0;}
html,body{height:100%;}
body{background: url(https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg) center bottom; background-size:cover;text-align:center;}
svg{
  text-transform:uppercase;
  color:darkorange;
  background: rgba(0,0,0,0.5);
  margin-top:5vh;
  width:85%;
  padding:0;
}

<svg viewbox="0 0 100 13">
  <defs>
    <mask id="strike">
      <rect x="0" y="0" width="100" height="13" fill="#fff" />
      <rect x="0" y="5" width="100" height="1" />
    </mask>
  </defs>
  <text id="text1" x="50" y="8.5" font-size="7" text-anchor="middle" fill="darkorange" mask="url(#strike)">SVG strike through</text>
</svg>

- web-tiki

---

多么巧妙的实现。 - Paul D. Waite

谢谢，我会尝试实现这个功能，但我会使用:before和:after来使文本可以突出显示，同时保持透明颜色。如果成功了，我会发布这个功能。 - Kael

@Kael，抱歉我不理解你上一条评论的意思 :( - web-tiki

Answer 2

你可以通过使用掩模在 Webkit 浏览器中实现这一点。

CSS

h1 {
    -webkit-mask-image: linear-gradient(0deg, white 20px, transparent 20px,  transparent 24px, white 24px);
}

demo

hover demo

- vals