วิธีแสดงข้อความบนภาพด้วย CSS3 มิกซ์โหมดมิกซ์

ภาพพื้นหลัง ดูดีมากหลังข้อความแสดงผลขนาดใหญ่ อย่างไรก็ตามการนำ CSS มาใช้นั้นไม่ได้ตรงไปตรงมา เราสามารถใช้ พื้นหลังคลิป: ข้อความ; คุณสมบัติอย่างไรก็ตามมันยังคงเป็นคุณสมบัติทดลองโดยไม่มีการสนับสนุนเบราว์เซอร์เพียงพอ.

ทางเลือก CSS เพื่อแสดงภาพพื้นหลังด้านหลังข้อความคือ ใช้ ผสมส่วนผสมโหมด คุณสมบัติ. ผสมผสานโหมดสำหรับองค์ประกอบ HTML ได้รับการสนับสนุนอย่างเป็นธรรมในเดสก์ท็อปสมัยใหม่และเบราว์เซอร์มือถือทั้งหมดยกเว้นบางอย่างเช่น Internet Explorer.

ในบทความนี้เราจะมาดูกันว่า ผสมส่วนผสมโหมด (สองโหมดโดยเฉพาะ) ทำงานและวิธีการใช้งาน แสดงข้อความที่มีพื้นหลังภาพ ในสองกรณีใช้:

1. เมื่อภาพพื้นหลัง สามารถมองเห็นได้ ผ่านข้อความ
2. เมื่อภาพพื้นหลัง วิ่งไปรอบ ๆ ข้อความ

ดูตัวอย่างในตัวอย่างด้านล่าง (ภาพมาจาก unsplash.com).

ผสมส่วนผสมโหมด คุณสมบัติ CSS กำหนดวิธีการ เนื้อหา และ ฉากหลัง ขององค์ประกอบ HTML ควร ผสมผสานกันตามสี.

ดูรายการโหมดการผสมซึ่งเราจะใช้ คูณ และ จอภาพ ในโพสต์นี้.

ก่อนอื่นมาดูกันว่าโหมดการผสมผสานสองแบบนี้ทำงานอย่างไร.

อย่างไร คูณ & จอภาพ ผสมผสานโหมดการทำงาน

เทคนิคการผสมโหมดเป็นฟังก์ชั่นที่ คำนวณค่าสีสุดท้าย ใช้องค์ประกอบสีขององค์ประกอบและฉากหลังของมัน.

คูณ โหมดผสมผสาน

ใน คูณ โหมดผสมผสานสีขององค์ประกอบและฉากหลังของพวกเขาคือ คูณ, และสีที่ได้จะถูกนำไปใช้กับเวอร์ชันที่ผสมสุดท้าย.

คูณ โหมดผสมผสานถูกคำนวณตามสูตรต่อไปนี้:

B (Cb, Cs) = Cb × Cs

ที่อยู่:cb - องค์ประกอบสีของฉากหลังCs - องค์ประกอบสีขององค์ประกอบที่มาB - ฟังก์ชั่นการผสม

เมื่อ cb และ Cs จะถูกคูณด้วยสีที่ได้คือการผสมผสานขององค์ประกอบสีทั้งสองนี้และคือ มืดที่สุดเท่าที่มืดที่สุดของสองสี.

ในการสร้างพื้นหลังของข้อความเราต้องให้ความสนใจกับตัวพิมพ์ใหญ่เมื่อ Cs (องค์ประกอบสีขององค์ประกอบต้นฉบับ) คือ ดำหรือขาว.

ถ้า Cs คือ สีดำ ค่าของมันคือ 0, สีที่ส่งออกจะเป็นสีดำเช่นกันเพราะ Cb × 0 = 0. ดังนั้นเมื่อองค์ประกอบมีสีดำมัน ไม่ว่าฉากหลังจะเป็นสีอะไร, ทั้งหมดที่เราเห็นหลังจากการผสมเป็นสีดำ.

ถ้า Cs คือ ขาว ค่าของมันคือ 1, สีเอาท์พุทเป็นอะไรก็ได้ cb เป็นเพราะCb × 1 = Cb. ดังนั้นในกรณีนี้เราจะเห็นฉากหลังโดยตรง ตามที่มันเป็น.

จอภาพ โหมดผสมผสาน

จอภาพ โหมดผสมผสานทำงานคล้ายกับ คูณ ผสมผสานโหมด แต่ ด้วยผลลัพธ์ที่ตรงกันข้าม. ดังนั้น พื้นหน้าสีดำ แสดงฉากหลัง ตามที่มันเป็น, และ พื้นหน้าสีขาวแสดงสีขาว ด้วยฉากหลังอะไรก็ตาม.

ลองดูสูตรของมันอย่างรวดเร็ว:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

เมื่อ Cs คือ สีดำ (0) สีฉากหลังจะแสดงหลังจากผสมดังนี้:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

เมื่อ Cs คือ ขาว (1) ผลลัพธ์จะเป็นสีขาวกับฉากหลังใด ๆ เช่น:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. รูปภาพที่แสดงผ่านข้อความ

ในการแสดงข้อความที่แสดงผ่านภาพพื้นหลังเราจะใช้ จอภาพ โหมดผสมผสาน กับ ข้อความสีดำ และ พื้นที่โดยรอบสีขาว.

 
 
น้ำ
 
 

 .ฉากหลัง กว้าง: 600px; ความสูง: 210px; ภาพพื้นหลัง: url (someimage.jpg); ขนาดพื้นหลัง: 100%; ขอบ: อัตโนมัติ; . text color: black; สีพื้นหลัง: สีขาว; โหมดผสม: หน้าจอ; ความกว้าง: 100%; ความสูง: 100%; ขนาดตัวอักษร: 160pt; น้ำหนักตัวอักษร: โดดเด่นยิ่งขึ้น; จัดข้อความ: ศูนย์; ความสูงของเส้น: 210px; กำไรขั้นต้น: 0;  

ขณะนี้ข้อความของเราดูเหมือนด้านล่างในขั้นตอนต่อไปเราจะเพิ่มสีที่กำหนดเองลงในพื้นหลัง.

การเพิ่มสี

อย่างที่คุณอาจคาดเดาได้ในตอนนี้การใช้โหมดผสมผสานทำให้เรามีสองสีให้เลือกสำหรับพื้นที่ที่ล้อมรอบข้อความ - ดำหรือขาว. อย่างไรก็ตาม ด้วยสีขาว, เป็นไปได้ที่จะเพิ่มสีเข้าไป ใช้การซ้อนทับ, ถ้าสีซ้อนทับ ตรงกับภาพที่ใช้.

หากต้องการเพิ่มสีให้กับพื้นที่โดยรอบให้เพิ่ม

เป็น HTML สำหรับการวางซ้อน, และให้มัน สีพื้นหลังที่มีความโปร่งใสสูง. ยังใช้ โหมดผสม: เพิ่มทวีคูณ คุณสมบัติสำหรับโอเวอร์เลย์เนื่องจากช่วยให้สีพื้นหลังของโอเวอร์เลย์เป็น ผสมผสานกันหน่อยดีกว่า ด้วยภาพที่ปรากฏภายในข้อความ.

 
 
น้ำ
 
 
 

 .โอเวอร์เลย์ background-color: rgba (0,255,255, .1); โหมดผสมผสาน: เพิ่มทวีคูณ; ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0;  

ด้วยเทคนิคนี้เราสามารถระบายสีบริเวณรอบ ๆ ข้อความด้วยพื้นหลังภาพ:

โปรดทราบว่าเทคนิคนี้ใช้งานได้ดีกับเท่านั้น สีสันโปร่งใสที่ละเอียดอ่อน. หากคุณใช้สีทึบแสงเต็มหรือสีที่ไม่ตรงกับภาพภาพที่ปรากฏภายในข้อความจะมีสีที่มองเห็นได้ชัดเจนของสีที่ใช้ดังนั้นเว้นแต่จะเป็นลักษณะที่คุณต้องการ, หลีกเลี่ยงสีทึบ.

2. ข้อความล้อมรอบด้วยภาพพื้นหลัง

แม้ว่าการวางข้อความแบบธรรมดาบนพื้นหลังของภาพ ต้องใช้เทคนิคเดียวกัน, ฉันจะแสดงตัวอย่างของการสาธิตด้านบนดูเหมือนว่าเมื่อ ผลเป็นตรงกันข้าม, เช่นเมื่อสีข้อความเป็นสีขาวและพื้นหลังเป็นสีดำ.

 .ข้อความ color: white; สีพื้นหลัง: สีดำ; โหมดผสม: หน้าจอ; ความกว้าง: 100%; ความสูง: 100%; ขนาดตัวอักษร: 160pt; น้ำหนักตัวอักษร: โดดเด่นยิ่งขึ้น; จัดข้อความ: ศูนย์; ความสูงของเส้น: 210px; กำไรขั้นต้น: 0;  

คุณสามารถใช้ ภาพซ้อนทับเดียวกัน เพื่อเพิ่มสีให้กับข้อความยกเว้นว่าคุณต้องการให้มันเป็นสีขาว.

 .โอเวอร์เลย์ background-color: rgba (0,255,255, .1); โหมดผสมผสาน: เพิ่มทวีคูณ; ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0;  

และด้านล่างคุณสามารถดูว่าตัวเคสกลับเป็นอย่างไร:

โปรดทราบว่าใน Internet Explorer หรือเบราว์เซอร์อื่นที่ไม่รองรับ ผสมส่วนผสมโหมด คุณสมบัติพื้นหลังภาพจะไม่ปรากฏขึ้นและข้อความจะยังคงเป็นสีดำ (หรือสีขาว).