Rumah >hujung hadapan web >tutorial css >Satu helah untuk mengajar anda cara menggunakan css untuk menambah imej latar belakang pada fon HTML (perkongsian kod)

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

奋力向前asal: 2021-08-13 16:56:197924semak imbas

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.

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>

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

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)；
   ｝

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

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;

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


时间也抛弃他

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;

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cipta latar belakang berwarna-warni dengan elemen CSS dalam satu helahArtikel seterusnya：Cipta latar belakang berwarna-warni dengan elemen CSS dalam satu helah

Artikel berkaitan

Lihat lagi