首頁 > 文章 > web前端 > 一招教你使用css為HTML字體新增背景圖（程式碼分享）

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

奋力向前原創: 2021-08-13 16:56:197920瀏覽

之前的文章《手把手教你使用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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：一招搞定css元素五彩斑斕的背景下一篇：一招搞定css元素五彩斑斕的背景

看更多