Rumah > Artikel > hujung hadapan web > Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

青灯夜游asal: 2022-09-02 18:19:132393semak imbas

Langkah pelaksanaan: 1. Gunakan linear-gradient() untuk menambah kesan latar belakang kecerunan pada medan teks, dengan sintaks "background-image: linear-gradient(...);" 2. Use atribut klip latar belakang dan Atribut warna membenarkan warna latar belakang kecerunan dipaparkan hanya pada teks dalam medan teks, iaitu, kecerunan teks mempunyai warna yang berbeza Sintaksnya ialah "klip latar belakang: teks; warna: lutsinar; ".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS, anda boleh mencapai warna teks yang berbeza dengan menambahkan kesan kecerunan pada teks dalam medan teks.

warna kecerunan teks css3: linear-gradient() background-clip

Tiada sifat langsung dalam CSS untuk menetapkan kecerunan teks, biasanya Teks hanya boleh menjadi warna pepejal. Walau bagaimanapun, anda boleh menggunakan keratan latar belakang untuk menjadikan warna latar belakang kelihatan dalam kawasan teks Nampaknya teks mempunyai kecerunan

Perenderan

Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

Kod

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    textarea {
	        font-size: 20px;
        background-image: linear-gradient(to right, red, blue);
        background-clip: text;
        -webkit-background-clip: text;
	        color: transparent; /*需要文字透明*/
    }
    </style>
</head>

<body>
	   <textarea>为你定制 发现精彩</textarea>
</body>
</html>

Kod itu tidak banyak, mari kita analisanya:

ialah nilai imej latar belakang yang merupakan warna kecerunan. background-image: linear-gradient(to right, red, blue);

Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

Kesan kecerunan digunakan pada latar belakang. Bagaimanakah saya boleh menggunakannya pada teks? Ini menggunakan atribut klip latar belakang. Oleh kerana ia adalah atribut baharu dan mempunyai isu keserasian, ia mesti diberi awalan

background-clip: text;
-webkit-background-clip: text;

Atribut klip latar belakang menentukan kawasan lukisan latar belakang
Sintaks:
background-clip: border-box|padding-box|content-box;

di atas tidak menyebutkan nilai

, ia tidak tersedia untuk semua Semua pelayar menyokongnya. Nilai text

ialah

, yang bermaksud bahawa teks dalam blok digunakan sebagai kawasan pemangkasan yang akan dipangkas ke arah luar teks akan dipangkas. text

Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

Anda boleh melihat bahawa terdapat sedikit kecerunan, tetapi ia tidak jelas; ini kerana teks itu sendiri juga mempunyai warna, dan teks berwarna akan menutupi latar belakang. Oleh itu, kami akhirnya menulis

untuk menjadikan teks telus, supaya warna latar belakang di belakangnya dapat dipaparkan. color: transparent;

Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza

(Belajar perkongsian video:

bahagian hadapan web)

Atas ialah kandungan terperinci Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 padding border background

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：Bagaimana untuk menentukan sama ada dua tatasusunan mempunyai unsur pendua dalam javascriptArtikel seterusnya：Bagaimana untuk menentukan sama ada dua tatasusunan mempunyai unsur pendua dalam javascript

Artikel berkaitan

Lihat lagi