เรียนรู้วิธีเพิ่มสีการไล่ระดับสีเชิงเส้นให้กับองค์ประกอบข้อความของคุณด้วย CSS และวิธีหลีกเลี่ยงข้อผิดพลาดในการไล่ระดับสีทั่วไป
ในการเพิ่มสีข้อความแบบไล่ระดับให้กับองค์ประกอบข้อความ HTML คุณจะต้องมีคุณสมบัติ CSS ต่อไปนี้:
background-webkit-background-clip-webkit-text-fill-color
ทำไมเราใช้ background คุณสมบัติสำหรับการระบายสีข้อความ? วิธีการนี้ดูเหมือนแฮ็คเล็กน้อย แต่ฉันสัญญาว่ามันจะได้ผล!
มาสร้างตัวอย่างสั้นๆ ที่เราใช้การไล่ระดับสีเชิงเส้นจากซ้ายไปขวากับองค์ประกอบข้อความ โดยใช้สองสีต่อไปนี้ สีส้มและสีแดง:
HTML
<h2> องค์ประกอบส่วนหัวที่มีแอตทริบิวต์คลาสที่เรียกว่า text-gradient :
<h2 class="text-gradient">Gradient text color!</h2>CSS
เพิ่มรูปแบบการไล่ระดับสีให้กับ .text-gradient คลาส:
.text-gradient {
/* Set the background color */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* Mask the color to the text, and remove the rest */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}ผลลัพธ์:
ไล่สีข้อความ!
เยี่ยมเลย!
แต่เดี๋ยวก่อน!
คุณสังเกตเห็นปัญหาในการใช้สองสีกับองค์ประกอบข้อความหรือไม่ สีถูกทาไม่สม่ำเสมอ
linear-gradient ฟังก์ชัน CSS ใช้ค่าสีสองค่า:
#ff8a00(ส้ม)#DD4C4F(สีแดง)
และควรจะกระจายจาก 0 ถึง 100% เท่าๆ กัน ตามที่ระบุไว้ใน CSS:
(to right, #ff8a00 0%, #DD4C4F 100%)ดังนั้นเราจึงต้องการ สิ่งนี้ บนองค์ประกอบข้อความ:
แต่ตัวอย่างข้อความของเราเป็นสีส้มเกือบทั้งหมด:
ไล่สีข้อความ!
เคล็ดลับ:หากคุณสลับธีมสีในเว็บไซต์นี้เป็นโหมดมืด (คลิกที่ไอคอนดวงจันทร์) จะมองเห็นได้ง่ายขึ้น
มันเกิดขึ้นเพราะว่า <h2> องค์ประกอบส่วนหัวเป็น ระดับบล็อก องค์ประกอบโดยค่าเริ่มต้น ซึ่งหมายความว่าพื้นหลังของพวกมันครอบคลุม ความกว้างทั้งหมด ของคอนเทนเนอร์หลัก
สิ่งนี้ทำให้สีจากคลาสการไล่ระดับสี (.text-gradient ) ที่เราเพิ่มใน <h2> องค์ประกอบขยายเกินความกว้างของข้อความของคุณเนื่องจากกำหนดเป้าหมาย background ทรัพย์สิน
ฉันจะเพิ่มเส้นขอบให้กับตัวอย่างข้อความเพื่อให้ประเด็นของฉันชัดเจน:
สีข้อความไล่ระดับ!
คุณเห็นไหม
ควรตั้งค่าการไล่ระดับสีข้อความบนข้อความเท่านั้น ไม่ใช่พื้นหลัง (แต่เราจำเป็นต้องใช้ background ให้ดำเนินการได้)
ในการแก้ไขปัญหานี้ คุณต้องแทนที่ <h2> องค์ประกอบเริ่มต้น display:block การตั้งค่าโดยเพิ่ม inline-block แทน:
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}ผลลัพธ์:
สีข้อความไล่ระดับ!
หวาน! คุณเห็นความแตกต่างหรือไม่? ตอนนี้ส่วนสีแดงของการไล่ระดับสีสองสีกำลังโผล่ขึ้นมาพอๆ กับสีส้มเพราะว่าใช้ 50-50
ความเข้ากันได้ของเบราว์เซอร์
เคล็ดลับการไล่ระดับสีได้รับการสนับสนุนในเบราว์เซอร์ WebKit เท่านั้น สำหรับเบราว์เซอร์อื่นๆ ให้ใช้ CSS color . ปกติ คุณสมบัติเป็นตัวเลือกสำรองและใช้สีที่คล้ายกับการไล่ระดับสี
