Есть ли способ сделать перфорированный текст?

Я хотел бы поместить фоновое изображение в div и поместить над ним перфорированный текст (т. Е. Граница перфорированного текста будет белой).Есть ли способ сделать перфорированный текст?

Так что я вижу изображение только по тексту.

Поскольку мой текст является динамическим (не могу сделать .PNG каждого слова), есть ли способ сделать это в jquery/css? Или единственным решением является SVG/Canvas?

Где я могу начать выполнение такой задачи? Это должно быть кросс-браузер (по крайней мере) для некоторых основных выпусков (например, я не против IE7).

-webkit-text-fill-color работает только на хром ...

источник

2015-08-27 markzzz

Почему вы имеете в виду * perfored * текст? То, что только граница письма окрашена, а внутренний цвет должен быть прозрачным? Посмотрите на этот вопрос (http://stackoverflow.com/questions/2570972/css-font-border). – D4V1D

http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/ – pbenard

http://thenewcode.com/1032/ Easy-Cross-Browser-Text-Clipping-Masks-with-Blend-Modes кажется, что этот трюк работает и в Firefox, но не в IE (11). Таким образом, SVG, вероятно, является только кросс-браузерным решением ... – sinisake

Вы пытаетесь добиться чего-то вроде этого?

h1 { 
 
    color: white; /* Fallback: assume this color ON TOP of image */ 
 
    background: url("http://lorempixel.com/400/400") no-repeat; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-family: Impact; 
 
} 
 

 
.backgroundclip h1 { 
 
    background: url("http://lorempixel.com/400/400") 0 0 no-repeat; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
} 
 

 
h1 { 
 
    color: orangered; 
 
    text-shadow: 0px 0px 2px 2px #fff; 
 
} 
 

 
.android .gradient-text { 
 
    color: white; 
 
    background: none; 
 
    -webkit-text-fill-color: white; 
 
    -webkit-background-clip: border-box; 
 
} 
 
.gradient-text { 
 
    background: -webkit-linear-gradient(gray, black); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<h1>Hey Dude</h1>

источник

2015-08-27 09:49:16

Возможно, вы захотите упомянуть, что поддержка свойств, используемых здесь, довольно плохая. –

Что-то вроде этого? Ничего не заполняет, белый штрих дает вам белую рамку и обрезанное изображение, фон.

<svg width="100%" height="100%" viewBox="0 0 480 360"> 
 
    <defs> 
 
    <clipPath id="sample" clipPathUnits="userSpaceOnUse"> 
 
     <text x="45" y="120" font-size="100">Clip Test</text> 
 
    </clipPath> 
 
    </defs> 
 
    <rect width="100%" height="100%" fill="black">Clip Test</rect> 
 
    <image xlink:href="http://www.w3.org/Graphics/SVG/Test/20110816/images/bluesquidj.png" preserveAspectRatio="none" x="20" y="20" width="410" height="160" clip-path="url(#sample)"/> 
 
    <text x="45" y="120" font-size="100" fill="none" stroke="white" stroke-width="2">Clip Test</text> 
 
</svg>

источник

2015-08-27 10:32:09

Есть ли способ сделать перфорированный текст?

ответ

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