Question

我想为某些文字制作背景图片，并且环顾四周，但我找不到任何简单的答案。所以我有一个想法，如果我制作了一个文字阴影，并保留了阴影，但删除了文本！继承了我的代码：

CSS：

span{
    color: white;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, 1px 1px 0 #FFF, -1px -1px 0 #FFF;
    font-size: 200;
    opacity: 1;
}

HTML

<span>HELLO</span>

我想让HELLO看不见但保留阴影让我有一个文字轮廓。那张照片可以闪耀出来。有任何想法吗？欢迎任何反馈！

Answer 1

仅提供字母0不透明度：

color: transparent; /* IE */
color: rgba(0,0,0,0); /* CSS3 */

请注意自IE8 and older doesn't support rgba以来的IE回退。

样本：

JS曾经为了演示而切换课程。

var el = document.getElementsByTagName('span')[0];
setInterval(function(){
  el.classList.toggle('shadowOnly');
}, 500);

body{ background: #000; }
span{
    color: #FFF;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, 1px 1px 0 #FFF, -1px -1px 0 #FFF;
    font-size: 200;
    opacity: 1;
}
span.shadowOnly{
    color: transparent; /* IE */
    color: rgba(0,0,0,0); /* CSS3 */
}

<span>HELLO</span>

Answer 2

只需将文字透明：

span{
    color: transparent;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, 1px 1px 0 #FFF, -1px -1px 0 #FFF;
    font-size: 200;
}

PS：这应该比使用rgba（）颜色更兼容。

如何删除文本但保留阴影

2 个答案:

样本：