有沒有辦法讓perfored文本？

我想在div上放一個背景圖像，並在其上放置一個perfored文本（即perfored文本的邊框將是白色的）。有沒有辦法讓perfored文本？

所以我只能看到整個文字的圖像。

由於我的文本是動態的（不能使每個單詞的.PNG）有沒有辦法做到這一點在jQuery/CSS？或者唯一的解決方案是SVG/Canvas？

我從哪裏開始做這樣的工作？它必須是跨瀏覽器（至少）一些主要版本（我不介意IE7例如）。

只對鉻-webkit-text-fill-color工程...

2015-08-27 markzzz

你們爲何* perfored *文字是什麼意思？只有字母邊框是彩色的，內部顏色應該是透明的？看看[this]（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

你可能想提到對這裏使用的屬性的支持很差..基本上我認爲是Chrome。 –

像這樣的事情？填充無，筆畫白色給你白色的邊框和裁剪的圖像，背景。

<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

有沒有辦法讓perfored文本？

回答

相關問題