Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai warna teks yang berbeza dalam css

Bagaimana untuk mencapai warna teks yang berbeza dalam css

青灯夜游asal: 2022-08-30 18:47:104531semak imbas

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

Bagaimana untuk mencapai warna teks yang berbeza dalam css

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;

Bagaimana untuk mencapai warna teks yang berbeza dalam css

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

Bagaimana untuk mencapai warna teks yang berbeza dalam css

Kod

nbsp;html>


<meta>

<style>
    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>




    <h1>前端简单说</h1>

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.

Baiklah, mari kita sambung bercakap tentang fokus kaedah kedua, atribut topeng Anda boleh membaca artikel: https://www.php.cn/css-tutorial-494998.html<.>

Ringkasnya, atribut topeng membenarkan bahagian tertentu elemen ditunjukkan atau disembunyikan.

Kita boleh memahami prinsip kaedah kedua dengan melihat gambar

Bagaimana untuk mencapai warna teks yang berbeza dalam css

(Belajar perkongsian video:

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!

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：Apakah axios berdasarkan es6?Artikel seterusnya：Apakah axios berdasarkan es6?

Artikel berkaitan

Lihat lagi