Cara menggunakan css untuk membuat perkataan dalam medan teks menggunakan warna yang berbeza-Soal Jawab bahagian hadapan-php.cn

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

青灯夜游

Lepaskan： 2022-09-02 18:19:41

asal

2452 orang telah melayarinya

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; ".

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

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>

Salin selepas log masuk

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;

Salin selepas log masuk

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!