一招教你使用css為HTML字體新增背景圖（程式碼分享）-css教學-PHP中文網

一招教你使用css為HTML字體新增背景圖（程式碼分享）

奋力向前

發布： 2021-08-15 15:04:02

原創

7977 人瀏覽過

之前的文章《手把手教你使用css為HTML字體添加邊框效果（程式碼分享）》中，給大家介紹了怎樣使用css給HTML字體添加邊框效果。以下這篇文章跟大家介紹如何用css為HTML字體加入背景圖，我們一起看看怎麼做。

一招教你使用css為HTML字體新增背景圖（程式碼分享）

先來看看最終實現的效果

一招教你使用css為HTML字體新增背景圖（程式碼分享）

如何在字體中添加背景圖？

1、在html開啟中，先寫div標籤，在

和中間，輸入程式碼

時間也拋棄他

。

程式碼範例

<!DOCTYPE html>
<html>
<head>
<title>给字体添加图片</title>
</head>
<body>
<div>时间也抛弃他</1div>
</body>
</html>

登入後複製

程式碼效果

一招教你使用css為HTML字體新增背景圖（程式碼分享）

#程式碼輸出結果，字體太小了，我要把字體放大，怎麼放大？使用font-family屬性設定文字的字體樣式，別忘需要寫程式碼範例

<style type="text/css">
    * {
        font-family: fantasy;
        font-size: 2em;
    }

登入後複製

程式碼效果

一招教你使用css為HTML字體新增背景圖（程式碼分享）

程式碼輸出結果效果出來了，接下來要怎麼為字體加上背景圖呢？使用background: url()試試看怎麼做。

div {
   background: url(3.jpg)；
   ｝

登入後複製

程式碼效果圖

一招教你使用css為HTML字體新增背景圖（程式碼分享）結果用大小調整大小不管用，隨著文字的大小改變怎麼做？我們可以使用div盒子的大小（寬度和高度）程式碼範例

 div {
        height:180px;
        width:710px;
     ｝

登入後複製

程式碼效果

一招教你使用css為HTML字體新增背景圖（程式碼分享）

#隨著文字的大小的效果，我們發現這只是為div盒子添加了一個背景圖，並不是為字體添加背景圖，缺少了一個屬性background-origin設定樣式，程式碼範例。

background-origin: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

登入後複製

效果圖片

一招教你使用css為HTML字體新增背景圖（程式碼分享）

ok，大功告成～

完整程式碼




给字体添加图片

<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;         
    }


时间也抛弃他

登入後複製

background-origin是什麼意思呢？透過給大家解釋一下。

css中的background-origin屬性指是內容框的定位背景影像有三種取值，分別為哪三種？

padding-box 內邊距框
border-box 邊框盒
content-box 內容框

語法代碼

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

登入後複製

建議學習： CSS影片教學

以上是一招教你使用css為HTML字體新增背景圖（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！