css怎么給HTML字體添加背景圖

發(fā)布時間：2021-08-13 19:07:52 來源：億速云閱讀：599 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“css怎么給HTML字體添加背景圖”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

先看一下最終實(shí)現(xiàn)的效果

css怎么給HTML字體添加背景圖

如何實(shí)現(xiàn)這種效果

1、HTML部分代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
<title>給字體添加背景圖</title>
</head>
<body>
<div>時間也拋棄他</1div>
</body>
</html>

2、CSS部分代碼實(shí)現(xiàn)

<style type=text/css>定義css樣式</style>

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

將CSS放在<head>和</head>之間，定義樣式。

background-origin是干什么用呢？屬于設(shè)置元素背景圖片的原始起始位置。

background-origin用語法

1、border-box

#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:border-box;
background-repeat:no-repeat;
}

代碼效果

css怎么給HTML字體添加背景圖

2、padding-box

#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:padding-box;
background-repeat:no-repeat;
}

代碼效果

css怎么給HTML字體添加背景圖

3、content-box

#MyDIV
{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:content-box;
background-repeat:no-repeat;
}

代碼效果

css怎么給HTML字體添加背景圖

參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值），或者是內(nèi)容區(qū)域開始顯示。

注意一下，如果背景不是no-repeat就屬性會無效，但它會從邊框開始顯示。

border-box屬性來了解盒模型

布局是尺寸功能，假如給新項(xiàng)目遇到這個問題是div寬度是100%形式，框占窗口寬度的50%，邊界和內(nèi)邊距是用像素表示怎么辦？可以使用屬性box-sizing來調(diào)整框模型。也可以用border-box給框模型更改成這個新的模型。

“css怎么給HTML字體添加背景圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

css怎么給HTML字體添加背景圖

如何實(shí)現(xiàn)這種效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽