使用黑色背景但透明文本的div使文本透明

时间:2014-11-06 00:40:22

标签: html css css3

我想制作一个黑色背景的div,但文字应该是透明的红色边框。有什么想法吗?

直到现在我已经能够使我的文本透明但是当我为div添加背景颜色时,它会使文本背景具有相同的颜色。

See this fiddle

HTML:

<div class="text">
    <h1>EXPERIENCES</h1>
</div>

CSS:

.text {
    position: absolute;
    top: 0; 
    background-color: #000;
    overflow: hidden;
}
.text h1 {

    font-size: 112px;
    -webkit-text-stroke-color: red;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;

}

1 个答案:

答案 0 :(得分:0)

尝试:

div { background:rgba(0,0,0,1);
      color:rgba(255,255,255,0.5);
      -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 3px;
      font-size:100px;
    }