透明的strikethrought文本

Question

我需要使用CSS在文本上实现透明的strikethrought,因此我不必用<h1>标记替换<img>标记.我已经设法用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>

我如何实现透明的strikethrought,它可以挤出我的文本并允许背景出现在这一行中.

Answer 1

您可以通过CSS使用和属性来实现对文本的透明strikethrought.line-heightoverflow:hidden;

演示:CSS透明攻击

输出:

说明:

1. 第1步: 使用em单位隐藏<h1>文本的底部,
   height:0.52em; overflow:hidden;以便高度适应您用于<h1>标签小提琴的字体大小
   
2. 步骤2: "重写"伪元素中的内容以最小化标记并防止内容重复.您可以使用自定义数据属性来保留标记中的所有内容,而不必为每个标题编辑CSS.
   小提琴
3. 步骤3:将伪元素文本对齐到顶部,这样只有底部用line-height:0;
   小提琴显示

相关代码:

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

此效果的另一种方法是使用带有掩码元素的 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>