CSS3怎么制作文字背景圖？針對(duì)這個(gè)問題，今天小編總結(jié)這篇有關(guān)CSS3制作文字背景圖的文章，可供感興趣的小伙伴們參考借鑒，希望對(duì)大家有所幫助。

海州網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),海州網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為海州數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的海州做網(wǎng)站的公司定做！

方法一、利用CSS3屬性mix-blend-mode:lighten;實(shí)現(xiàn)

使用 mix-blend-mode 能夠輕易實(shí)現(xiàn)，我們只需要構(gòu)造出黑色文字，白色底色的文字 div ，疊加上圖片，再運(yùn)用 mix-blend-mode 即可，簡(jiǎn)單原理如下：

核心代碼如下：

<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>
.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;
}
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

方法二、-webkit-background-clip:text;

使用了這個(gè)屬性的意思是，以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。

<div class="pic2">
    image
</div>
.pic2{
    width: 500px;
    height: 500px;
    margin: 40px auto;
    background: url("1.jpg") no-repeat center center;
    background-size: cover;
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    line-height: 500px;
    /*很重要*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

缺點(diǎn)：只支持webkit內(nèi)核的瀏覽器，兼容性差。

以上就是CSS3制作文字背景圖的詳細(xì)內(nèi)容，代碼示例簡(jiǎn)單明了，如果在日常工作遇到此問題。通過這篇文章，希望你能有所收獲，更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：CSS3怎么制作文字背景圖
瀏覽地址：http://chinadenli.net/article32/pgpgpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、小程序開發(fā)、響應(yīng)式網(wǎng)站、服務(wù)器托管、微信公眾號(hào)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)