css – 透明的文字

我需要用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>

我怎样才能实现透明的拼贴,让我的文字出现,让背景出现在这一行.

解决方法

您可以通过使用line-height和overflow：hidden来实现对文本的透明化,属性.

演示：CSS transparent strike through

输出：

说明：

>步骤1：隐藏

文本的底部withheight：0.52em;溢出：隐藏;使用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;
}

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

SVG

另一种方法是使用SVG与mask element. 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.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>

css – 透明的文字

解决方法

猜你在找的CSS相关文章