站長(zhǎng)資訊網(wǎng)
之前的文章《手把手教你使用css給HTML字體添加邊框效果（代碼分享）》中，給大家介紹了怎樣使用css給HTML字體添加邊框效果。下面本篇文章給大家介紹如何用css給HTML字體添加背景圖，我們一起看看怎么做。
先看一下最終實(shí)現(xiàn)的效果
如何在字體添加背景圖？
1、在html打開(kāi)中，首先寫(xiě)div標(biāo)簽，在<body>和</body>中間，輸入代碼<div>時(shí)間也拋棄他</div>。
代碼示例
<!DOCTYPE html> <html> <head> <title>給字體添加圖片</title> </head> <body> <div>時(shí)間也拋棄他</1div> </body> </html>
代碼效果
代碼輸出結(jié)果，字體太小了，我要把字體放大，怎么放大？使用font-family屬性設(shè)置文字的字體樣式，別忘需要寫(xiě)<style type="text/css">…</style>代碼示例
<style type="text/css"> * { font-family: fantasy; font-size: 2em; }
代碼效果
代碼輸出結(jié)果效果出來(lái)了，接下來(lái)怎么給字體添加背景圖呢？使用background: url()試試看看怎么做。
div { background: url(3.jpg)； ｝
代碼效果圖
結(jié)果用大小調(diào)整大小不管用，隨著文字的大小改變?cè)趺醋?？我們可以使用div盒子的大?。▽挾群透叨龋┐a示例
div { height:180px; width:710px; ｝
代碼效果
隨著文字的大小的效果，我們發(fā)現(xiàn)這只是給div盒子添加了一個(gè)背景圖，并不是給字體添加背景圖，缺少了一個(gè)屬性background-origin設(shè)置樣式，代碼示例。
background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
效果圖片
ok，大功告成～
完整代碼
<!DOCTYPE html> <html> <head> <title>給字體添加圖片</title> </head> <style type="text/css"> * { font-family: fantasy; font-size: 2em; } div { height:180px; width:710px; background: url(3.jpg) no-repeat; background-origin: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> <body> <div>時(shí)間也拋棄他</1div> </body> </html>
推薦學(xué)習(xí)：CSS視頻教程
