Как сделать текстовый штрих с прозрачным текстом

Я нашел это решение: Outline effect to text Это здорово, но возможно ли сделать текст прозрачным и только наброски для рисования? Это происходит, например, с теневой коробкой, так как даже если в поле нет фона, вы не увидите тень «под». Но с текстом, если он прозрачен, вы видите всю тень типа. Можно ли получить только контур с прозрачным текстом?Как сделать текстовый штрих с прозрачным текстом

EDIT: Проблема заключается в том, чтобы иметь хороший резерв для браузеров, которые не поддерживают, например, -webkit-text-outline, потому что они не будут рисовать контур, и они сделают текст невидимым.

источник

2015-05-05 Vandervals

Вы можете достичь прозрачного текста с текстом-тактный с инлайн SVG:

Transparent text with stroke

body { 
 
    background: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg'); 
 
    background-size: cover; 
 
} 
 
svg{width:100%;}

<svg viewbox="0 0 10 2"> 
 
    <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text> 
 
</svg>

источник

2015-05-05 10:46:07

@ Vandervals, что неправильно. Это отзывчивый, индексируемый google и выбираемый, как обычный html. ([с 2010 года] (http://googlewebmastercentral.blogspot.fr/2010/08/google-now-indexes-svg.html)) –

@ Vandervals и я бы добавил, что он имеет гораздо больше поддержки браузера, чем 'text-stroke ' –

Кажется лучшим вариантом, поскольку текстовый штрих является неофициальным расширением, которое было удалено из спецификаций w3c (и поэтому может быть удалено в chrome и т. Д. В ближайшие обновления). – zelexir

Ну, используя CSS3, это возможно, но только с некоторыми префиксами браузера. Объединение color: transparent будет генерировать то, что вы ищете.

Например:

span { 
    color: transparent; 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: black; 
}

jsFiddle Demo

Стоит отметить, однако, что использование text-stroke-* по-прежнему ограничено. См. Can I Use.

Если вы хотите хороший запасной вариант, вы можете использовать медиа-запрос:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    span { 
     color: #000; 
    } 
}

источник

2015-05-05 10:35:48 BenM

Нет ли версии moz и ms для этого? потому что проблема заключается в том, что вы не можете сказать: «Если вы не webkit, не показывайте цвет как прозрачный» (иначе это было бы не очень отзывчиво). Конечно, вы можете проверить его с помощью js и включить в него как определенный класс, но есть ли только решение css? – Vandervals

Для этого можно использовать мультимедийный запрос, например, экран @media и (-webkit-min-device-pixel-ratio: 0). – BenM

Я думаю, что теперь есть полустандартный «текстовый ход»? – rogerdpack

я наконец-то нашел отзывчивый ответ на проблему WebKit инсульта:

span{ 
    color: white; 
    text-shadow: 1px 1px black, -1px -1px black; 
} 
@supports(-webkit-text-stroke: 1px black){ 
    span{ 
     color: transparent; 
     -webkit-text-stroke: 1px black; 
     text-shadow: none; 
    } 
}

Это работает как @supports были реализовано в большинстве WebKit браузеров, таких как хром и опера в течение некоторого времени.

источник

2015-05-05 10:56:31 Vandervals

Я предполагаю, что это полностью зависит от вашей аудитории браузера. http://caniuse.com/#feat=css-featurequeries по сравнению с http://caniuse.com/#search=svg – zelexir

конечно! он зависит от того, насколько важен для вашего стиля, но это выглядит как отличный трюк для проблем с другими правилами. – Vandervals

, объединяющий поддержку браузера для обоих свойств, отображает текстовый сток только в хромовой опере и браузере Android. –

Как сделать текстовый штрих с прозрачным текстом

ответ

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