Dua kaedah: 1. Gunakan klip latar belakang, sintaksnya ialah "elemen teks {background-image:linear-gradient(..);background-clip:text;color:transparent;}". 2. Gunakan mask, sintaksnya ialah "elemen teks {color: color value 1;} text element: before {mask: linear-gradient(..); color: color value 2;}".
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 elemen teks. Berikut memperkenalkan dua cara untuk mencapai kesan kecerunan teks.
Kaedah 1: linear-gradient() background-clip
Tiada sifat langsung untuk ditetapkan dalam CSS Kecerunan teks, biasanya teks hanya boleh menjadi warna pepejal. Walau bagaimanapun, anda boleh menggunakan keratan latar belakang untuk menjadikan warna latar belakang muncul dalam kawasan teks, yang kelihatan seperti teks mempunyai kecerunan.
Perenderan
Kod
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .text { background-image: linear-gradient(to right, red, blue); background-clip: text; -webkit-background-clip: text; color: transparent; /*需要文字透明*/ } </style> </head> <body> <h1 class="text">为你定制 发现精彩</h1> </body> </html>
Kod bukan Lagi , mari kita lihat:
background: linear-gradient(to right, red, blue);
Garis ini menetapkan latar belakang kepada warna kecerunan Sila ambil perhatian bahawa ini ialah singkatan, ia menetapkan warna kecerunan untuk background-image
, bukan background-color
, nilai imej latar belakang ialah warna kecerunan.
-webkit-background-clip: text;
Baris ini mengenai atribut latar belakang-klip:
Atribut latar belakang-klip menentukan kawasan lukisan latar belakang
Sintaks background-clip: border-box|padding-box|content-box;
Nilai teks di atas tidak dinyatakan, anda juga sepatutnya dapat memikirkan isu keserasiannya Pada masa ini, belum semua pelayar menyokongnya.
Jika nilai ialah teks, ini bermakna teks dalam blok digunakan sebagai kawasan pemangkasan yang akan dipangkas ke luar dipangkas.
Jadi, kami akhirnya menulis color: transparent;
untuk menjadikan teks telus, yang bermaksud bahawa warna latar belakang di belakangnya akan terserlah.
Kaedah 2: topeng linear-gradient()
Rendering
Kod
<!doctype html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> h1{ position: relative; color: yellow; } h1:before{ content: attr(text); position: absolute; z-index: 10; color:pink; -webkit-mask:linear-gradient(to left, red, transparent ); } </style> </style> </head> <body> <h1 text="前端简单说">前端简单说</h1> </body> </html>
Kodnya tidak banyak, mari kita bincangkan secara ringkas,
:sebelum pemilih memilih Sisipkan kandungan sebelum elemen tertentu.
Gunakan atribut kandungan untuk menentukan kandungan yang hendak disisipkan.
nilai kandungan attr digunakan untuk mendapatkan nilai atribut, content:attr (nama atribut);
content: attr(text);
boleh mendapatkan atribut teks elemen, atribut teks di sini adalah sendiri Sebagai atribut tersuai, anda juga boleh menambah atribut tt pada elemen, seperti ini <h1 tt="前端简单说">前端简单说</h1>
Kemudian tulis atribut kandungan seperti ini, content: attr(tt);
juga akan berfungsi.
Ringkasnya, atribut topeng membenarkan bahagian tertentu elemen ditunjukkan atau disembunyikan. Kita boleh memahami prinsip kaedah kedua dengan melihat gambar (Belajar perkongsian video:Baiklah, mari kita sambung bercakap tentang fokus kaedah kedua, atribut topeng Anda boleh membaca artikel: https://www.php.cn/css-tutorial-494998.html<.>
Bermula dengan bahagian hadapan web )
Atas ialah kandungan terperinci Bagaimana untuk mencapai warna teks yang berbeza dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!