如何通過CSS將圖案變爲書面文字？

前幾天我看到一個網站，書面文本有一個背景圖像。如何通過CSS將圖案變爲書面文字？

是否已經可以用CSS來獲得背景圖像轉換爲文本？

我不想在文本背後有背景圖片。我不知道要實現這一點。 :(

感謝加戈！

http://img221.imageshack.us/img221/232/examplewf.png

來源

2011-07-15 gago

GET一個背景圖像轉換成文本？你什麼意思？ – Raptor

我認爲他希望文字可以在圖像的四周（可能是任何一邊）出現，而不是將其作爲背景圖像，文字會穿過它的頂部。 –

它也可以是自定義字體。 – Michas

-1

你已經可以用在它有這樣一個模式的字體來實現的示例圖像。對於您將需要使用CSS @font面取向或使用自定義字體的一些其他的方式。

除此之外，我想說的是你唯一的選擇就是讓一個特定的背景/樣式文本的圖像。

來源

2011-07-15 10:04:40 Joonas

@gago;你可以使用css3 background clip屬性。

例如 CSS：

p { 
    color: white; 
    background: url(images/fire.jpg) no-repeat; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

檢查此鏈接瞭解更多http://css-tricks.com/7850-image-under-text/

來源

2011-07-15 10:16:17 sandeep

由於糟糕的瀏覽器支持，我仍然會限制自己。不僅如此，但如果我記得它是正確的，這在ie9中會失敗。 – Joonas

你必須解釋它是在你的問題中，至少你想支持哪個瀏覽器。這是由moz和webkit瀏覽器支持的屬性。 – sandeep

當它沒有被指定時，我通常認爲跨瀏覽器支持是被通緝的，因爲它是有道理的。如果不是，那麼他會提及它。而我不是OP。 – Joonas

-webkit-background-clip做工作

HTML

<header> 
     <h3><span>B</span><span>Brainz:: An Amazing Touch</span></h3> 
    </header>

CSS

header span:first-child 
    { 
    font-size: 7em; 
    color: white; 
    background: url("strip.png") repeat center center; 
    background-size: 6px 6px; 
     background-clip: content-box; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
    }

View result

此方法僅由webkit瀏覽器的支持，這意味着櫃面它在non-webkit瀏覽器失敗，你必須設置一個color財產和background-clip爲內容框

來源

2015-12-16 17:32:02

如何通過CSS將圖案變爲書面文字？

回答

相關問題