文本上的透明删除线答案

【问题标题】：transparent strikethrought on text文本上的透明删除线
【发布时间】：2014-07-27 18:21:20
【问题描述】：

我需要使用 CSS 对文本实现 透明删除线，因此我不必将 <h1> 标记替换为 <img> 标记。我已经设法使用 CSS 在文本上实现了一个 line-through，但我不能让它变得透明。

想要的效果：

我有什么：

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

&lt;h1&gt;EXAMPLE&lt;/h1&gt;

如何实现突出我的文本的透明删除线并允许背景出现在这一行中。

【问题讨论】：

那是一张图片，很可能是用 illustrator 创建的，其中一个剪贴蒙版被用来“剪掉”文本中的那条线，让你看到它背后的背景。不能在html和css中完成
@ChrisM 甚至认为 CSS 通常无法实现“剪切”效果，这一点是。
@web-tiki 好的，我想从技术上讲，您已经通过一些技巧完成了它。你实际上是把这个词写了两次并切断了部分。我不明白为什么line-height:0 将文本向上推，显示下半部分而不是顶部。
@ChrisM 这一切都取决于你认为什么是黑客。在我的实现中，CSS/HTML 根据 W3 标准是有效的。对于只显示底部的文本，这是因为line-height:0，它将文本垂直居中到容器的顶部，当我在容器上设置overlow:hidden时，只显示文本的底部。跨度>
@ChrisM 它没有完全隐藏它，因为我设置了元素的高度。 overflow:hidden; 属性根据高度隐藏，而不是根据行高。

标签： css svg fonts css-shapes

【解决方案1】：

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

演示：CSS transparent strike through

输出：

说明：

第 1 步： 隐藏 <h1>text 的底部
height:0.52em; overflow:hidden; 使用 em 单位，以便高度适应您用于 <h1> 标签的字体大小
fiddle
第 2 步：“重写”伪元素中的内容以最小化标记并防止内容重复。您可以使用自定义数据属性来保留标记中的所有内容，而不必为每个标题编辑 CSS。
fiddle
第 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;
}

&lt;h1 data-content="EXAMPLE" &gt;&lt;span&gt;EXAMPLE&lt;/span&gt;&lt;/h1&gt;

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>

【讨论】：

多么聪明的实现啊。
谢谢，我尝试实现这一点，但我会尝试使用 ´:before´ 和 ´:after´ 文本可以用透明颜色突出显示。如果我成功了，我会发布这个。
@Kael 抱歉，但我不明白你的最后评论:(

【解决方案2】：

您可以在 webkit 浏览器中使用屏蔽实现此目的

CSS

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

demo

hover demo

【讨论】：