Прозрачный текст с непрозрачной теневой тенью?

Question

Я хочу прозрачный текст, из которого фон должен быть видимым, но тень текста должна быть непрозрачной. Я пробовал:

opacity:0; 
text-shadow 3px 3px 3px orange; 

но текст-тень становится прозрачным.

Я хочу привести, как это:

http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4

Пожалуйста, помогите.

Answer 1

Вы можете получить этот эффект в современных браузерах (Chrome, Safari и FF) с помощью опции режима наложения

.test { 
 
    font-size: 360px; 
 
    position: relative; 
 
    border: solid 1px; 
 
    display: inline-block; 
 

 
    margin: 5px; 
 
    text-shadow: orange 10px 0px 30px, orange -10px 0px 30px, orange 0px 10px 30px, orange 0px -10px 30px; 
 
    color: black; 
 
    background: black; 
 
    mix-blend-mode: screen; 
 
} 
 

 
body { 
 
    background-image: url(http://i.stack.imgur.com/08Y1e.jpg); 
 
    }

<div class="test">STAR FIELD</div>

Я загрузил фоновое изображение, чтобы избежать проблем со ссылкой

Answer 2

, если у вас есть солидный опыт, вы можете попробовать этот способ:

http://jsfiddle.net/aKp3C/

<div class="content"> 
    <div class="text text1"> 
     Example text 
    </div> 
    <div class="text text2"> 
     Example text 
    </div> 
</div> 



body{ 
    background-color: #333; 
} 

.content{ 
    position: relative; 
} 

.text{ 
    font-size: 25px; 
    font-weight: bold;  
} 

.text1{ 
    text-shadow: 3px 3px 3px orange; 
} 

.text2{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    color: #333; 
} 

Answer 3

Вы можете использовать свойство text-shadow-blend-mode CSS3 для этой цели. Однако, похоже, он еще не поддерживается (Firefox 39.0 полностью игнорирует его).

Я также борюсь с (полу) прозрачным текстом изложения. Проблема в том, что text-shadow на самом деле не генерирует контуры, но дублирует текст за его передним планом и в конечном итоге сдвигает и размывает его. (Любой текст, цвет которого не является непрозрачным, сначала будет смешаться со своей собственной тенью.)

В настоящее время это не может быть выполнено с помощью CSS.

EDIT: Вы могли бы, однако, найти полезный this advice с участием SVG и его свойства stroke.