在文本上透明

我需要在CSS上实现透明的文本处理，因此我不必用<img>标记替换<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;来实现透明的纯文本 overflow:hidden; 属性。

演示： CSS透明穿透

输出：

---

说明：

第1步：用<h1>隐藏<h1>文本的底部
height:0.52em; overflow:hidden; 使用em单位，以便高度适应您用于<h1>标记的字体大小
小提琴

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

第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>

---

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

CSS

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

演示

悬停演示

链接地址: http://www.djcxy.com/p/87813.html

上一篇: transparent strikethrought on text

下一篇: digit hex color code