透明的文字 [英] transparent strikethrought on text

问题描述

我需要在CSS上实现对文本的透明删除功能，所以我不必用< h1> < img> 标记。我已经设法使用CSS在文本上实现了换行符，但是我不能让它透明。

所需的效果：

我有什么：

  body {background：url ：//lorempixel.com/output/people-qc-640-480-1.jpg）; background-size：cover;} h1 {font-family：arial;位置：相对; display：inline-block;} h1：after {content：'';位置：绝对; width：100％; height：2px; left：0; top：17px; background：#fff;}  

 < h1& / h1> 

如何实现 transparent删除我的文本，允许背景出现在这一行。

解决方案

只有使用CSS，才能实现对文本的透明删除功能< $ c> line-height 和 overflow：hidden; 属性。

演示：

步骤2：重写伪元素中的内容以最小化标记并防止内容重复。您可以使用自定义数据属性来保留标记中的所有内容，而不必为每个标题编辑CSS。
小提琴

第3步：将伪元素文本对齐到顶部，与 line-height：0;
fiddle

---

相关代码 >

  body {background：url（http://lorempixel.com /output/people-qc-640-480-1.jpg）; background-size：cover;} h1 {font-family：arial; position：relative;} h1 span，h1：after {display：inline-block;身高：0.52em; overflow：hidden; font-size：5em;} h1：after {content：attr（data-content）; line-height：0;位置：绝对; top：100％; left：0;}  

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

b $ b

---

SVG

此效果的另一种方法是使用SVG与 mask元素。 演示显示的方法和此处是相关代码：

-code>

  * {margin：0; padding：0;} html，body {height：100％;} body中心底部{background：url（https://farm8.staticflickr.com/7140/13689149895_0cce1e2292_o.jpg） background-size：cover; text-align：center;} svg {text-transform：uppercase;颜色：深色background：rgba（0,0,0,0.5）; margin-top：5vh;宽度：85％; padding：0;}  

 < svg viewbox = 0 100 13> < defs> < mask id =strike> < rect x =0y =0width =100height =13fill =＃fff/> < rect x =0y =5width =100height =1/> < / mask> < / defs> < text id =text1x =50y =8.5font-size =7text-anchor =middlefill =darkorangemask =url（#strike）&通过< / text>< / svg>  

I need to implement a transparent strikethrought on text with CSS so I don't have to replace the <h1> tag by an <img> tag. I have managed to implement a line-through on the text with CSS but I can't make it transparent.

The desired effect :

What I have :

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>

How I can I implement the transparent strikethrought which extrudes my text and allows the background to appear in this line.

解决方案

You may achieve the transparent strikethrought on text only with CSS with the use of line-height and overflow:hidden; properties.

Demo : CSS transparent strike through

Output :

---

Explanation :

1. Step 1 : hide the bottom of the <h1>text with
   height:0.52em; overflow:hidden; use em units so that the height adapts to the font size you are using for the <h1> tag
   fiddle
2. Step 2 : "rewrite" the content in a pseudo element to minimise markup and prevent content repetition. You may use a custom data attribute in order to keep all the content in the markup and don't have to edit the CSS for every title.
   fiddle
3. step 3 : align the pseudo element text to the top so only the bottom is shown with line-height:0;
   fiddle

---

Relevant code :

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

Another approach for this effect is to use SVG with a mask element. The demo shows that approach and here is the relevant code :

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

这篇关于透明的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！