文字上的透明删除线

Question

我需要使用CSS 实现透明strikethrought文本，因此我不必用<h1>标记替换<img>标记。我已经设法使用CSS在文本上实现了直通，但我无法使其透明。

期望的效果：

我有什么：

＆＃13;

＆＃13;

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

＆＃13;

<h1>EXAMPLE</h1>

＆＃13;

＆＃13;

＆＃13;

如何实施透明的strikethrought，它可以挤出我的文字并允许背景出现在这一行中。

Answer 1

使用line-height和overflow:hidden;属性，您只能使用CSS实现透明文本。

演示： CSS transparent strike through

输出：

---

说明：

1. 第1步：使用<h1>使用em单位隐藏height:0.52em; overflow:hidden;文字的底部，以便高度适应您用于的字体大小<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 element的SVG。 demo显示了该方法，此处是相关代码：

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

Answer 2

您可以使用屏蔽

在webkit浏览器中实现此目的

CSS

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

demo

hover demo