我需要实施一个使用 CSS 在文本上添加透明删除线所以我不必更换<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>我怎样才能实施透明的删除线会挤出我的文字并允许背景出现在该行中。
您可能会实现文本上透明删除线只能与 CSS 配合使用line-height and overflow:hidden;特性。
Demo : CSS透明删除线
Output :
解释 ：
<h1>文本与height:0.52em; overflow:hidden;使用 em 单位，以便高度适应您所使用的字体大小<h1> tag 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 与掩码元素. The 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>