Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)-tutorial css-php.cn

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

奋力向前

Lepaskan： 2021-08-15 15:04:02

asal

7886 orang telah melayarinya

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan css untuk menambah kesan sempadan pada fon HTML (perkongsian kod) ", saya memperkenalkan anda cara menggunakan css untuk menambah kesan sempadan kepada fon HTML. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML Mari kita lihat cara melakukannya bersama-sama.

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

Mari kita lihat kesan akhir dahulu

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

Bagaimana untuk tambah dalam fon Imej latar belakang?

1. Apabila membuka html, mula-mula tulis teg div, antara

dan , masukkan kod

Contoh kod

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

Salin selepas log masuk

Kesan kod

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

Hasil keluaran kod, fon terlalu kecil, saya nak besarkan fon, apakah yang perlu saya lakukan? Gunakan atribut font-family untuk menetapkan gaya fon teks Jangan lupa untuk menulis Contoh Kod

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

Salin selepas log masuk

<🎜. >Kesan Kod

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

Hasil keluaran kod ditunjukkan bagaimana untuk menambah imej latar belakang pada fon seterusnya? Cuba gunakan background: url() untuk melihat cara ia berfungsi.

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

Salin selepas log masuk

Penyampaian kod

Akibatnya, saiz semula tidak berfungsi Apakah yang perlu saya lakukan apabila saiz teks berubah? Kita boleh menggunakan saiz (lebar dan tinggi) contoh kod kotak div Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

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

Salin selepas log masuk

Kesan kod

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

Dengan kesan saiz teks, kami mendapati Ini hanya menambah imej latar belakang pada kotak div, bukan pada fon Ia tidak mempunyai asal latar belakang atribut untuk menetapkan gaya, contoh kod.

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

Salin selepas log masuk

Gambar kesan

Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

ok, anda sudah selesai~

Kod penuh




给字体添加图片

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


时间也抛弃他

Salin selepas log masuk

Apakah maksudnya? Dengan menerangkannya kepada semua orang. background-origin

Atribut

dalam css merujuk kepada imej latar belakang kedudukan kotak kandungan. Apakah tiga nilai tersebut. background-origin

kotak padding kotak padding

kotak sempadan kotak sempadan
kotak kandungan kotak kandungan

Kod sintaks

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

Salin selepas log masuk

Pembelajaran yang disyorkan:

Tutorial video CSS

Atas ialah kandungan terperinci Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!