2014-12-15 2 views
3

У меня есть изображение в качестве фона на моем теле (фиолетовый вид градиента). В середине страницы есть текст. Я хочу, чтобы текст был прозрачным (т. Е. Отображал фиолетовый градиент), но я хочу, чтобы сплошной цвет 1px-штрих в тексте был видимым.Прозрачный текст с твердым штрихом в CSS

text-shadow: 1px 0 red, -1px 0 red, 0 1px red, 0 -1px red; 

не работает, потому что если вы сделаете текст прозрачным, вы увидите тени.

color: rgba(0,0,0,0); 

не делает текст см через и ..

opacity: 0; 

материал делает удар непрозрачный, а также.

Любые идеи? Это возможно только с помощью CSS?

EDIT: Я только что прочитал о текстовом штрихе. Но не может найти ничего полезного.

+0

завернуть его в DIV и добавить границу для DIV с 'дисплей: инлайн-block' –

+0

связаны: http://stackoverflow.com/questions/13932946/transparent-text-with -white-background-with-css –

+0

> Я не совсем понимаю дисплей: встроенный блок для этого. Это больше связано с тем, как браузер отображает элемент. (в виде блока или встроенного элемента). Как это поможет мне получить границу вокруг моего текста (а не div)? В основном то, что я хочу, это текст-цвет: прозрачный; & text-border: 1px сплошной белый; (я знаю те arent правильные теги) > Теперь, пробовав связанный пост с фоном-клипом < –

ответ

0
article h1 { 
color: rgba(0, 0, 0, 0.2); 
-webkit-text-stroke: 1px black; 

}

+1

, не могли бы вы объяснить, что делает этот код –

+0

Так как шрифт в веб-векторах - это векторы, я думаю, вы можете редактировать их, как векторы. Это означает, что, как и в случае с Adobe Illustrator, добавьте штрих. Это добавляет штрих/линию вокруг снаружи –

Смежные вопросы