1. ข้อมูลเบื้องต้นเกี่ยวกับแอตทริบิวต์โหมดผสมผสม 2. ค่าคุณลักษณะทั่วไปของโหมดผสมผสม 3. แอปพลิเคชันแอตทริบิวต์โหมดผสมผสม 1. ผลกระทบของแอปพลิเคชัน 2. รหัสที่เกี่ยวข้อง 4. พื้นหลังการปรับข้อความอัจฉริยะ 1 . สไตล์ดั้งเดิม 2. เพิ่มมิกซ์ 3. รหัสการใช้งาน
[ แอตทริบิวต์ mix-blend-mode ] ใน CSS อธิบายถึงวิธีการผสมผสาน เนื้อหาขององค์ประกอบ กับ เนื้อหาขององค์ประกอบหลักที่อยู่ติดกันขององค์ประกอบ และ พื้นหลังขององค์ประกอบ
ใช้เพื่อตั้งค่าโหมดการผสมระหว่างพื้นหลังและพื้นหน้าขององค์ประกอบ สามารถใช้กับองค์ประกอบใดก็ได้ สามารถใช้กับแอตทริบิวต์พื้นหลังรูปภาพเพื่อสร้างเอฟเฟกต์ภาพที่หลากหลาย
| หมายเลขซีเรียล | ค่าแอตทริบิวต์ | โหมดการผสมและคำแนะนำ |
|---|---|---|
| 1 | โหมดมิกซ์เบลนด์: ปกติ ; | ปกติ: คุณสมบัตินี้ไม่ใช้การผสมใดๆ |
| 2 | โหมดผสมผสม: ทวีคูณ ; | คูณ: องค์ประกอบจะถูกคูณด้วยพื้นหลังและแทนที่สีพื้นหลัง สีที่ได้จะเป็นสีเข้มเท่ากับพื้นหลังเสมอ |
| 3 | โหมดมิกซ์เบลนด์: โอเวอร์เลย์ ; | โอเวอร์เลย์: คูณหรือมาสก์เนื้อหาตามสีพื้นหลัง ซึ่งตรงข้ามกับโหมดการผสมแสงแข็ง |
| 4 | โหมดมิกซ์เบลนด์: หน้าจอ ; | หน้าจอ: คูณพื้นหลังและเนื้อหา จากนั้นเสริมผลลัพธ์ ซึ่งจะส่งผลให้เนื้อหาสว่างกว่าสีพื้นหลัง |
| 5 | โหมดมิกซ์เบลนด์: มืดลง ; | ทำให้มืดลง เมื่อเนื้อหามืดลง พื้นหลังจะถูกแทนที่ด้วยเนื้อหา มิฉะนั้นจะยังคงเหมือนเดิม |
| 6 | โหมดผสมผสม: เบาลง ; | สว่างขึ้น: พื้นหลังจะถูกแทนที่ด้วยเนื้อหาที่สว่างกว่า |
| 7 | โหมดผสมผสม: สีหลบ ; | สีจางลง: คุณสมบัตินี้ทำให้สีพื้นหลังสว่างขึ้นเพื่อสะท้อนสีของเนื้อหา |
| 8 | โหมดผสมผสม: เผาสี ; | การทำให้สีอ่อนลง: จะทำให้พื้นหลังมืดลงเพื่อสะท้อนสีธรรมชาติของเนื้อหา |
| 9 | โหมดมิกซ์เบลนด์: ฮาร์ดไลท์ ; | แสงจ้า: คุณสมบัตินี้จะกรองหรือคูณขึ้นอยู่กับสีของเนื้อหา |
| 10 | โหมดมิกซ์เบลนด์: แสงอ่อน ; | แสงนวล: ขึ้นอยู่กับสีของเนื้อหา สิ่งนี้จะเข้มขึ้นหรือจางลง |
| 11 | โหมดมิกซ์เบลนด์: ความแตกต่าง ; | ความแตกต่าง : วิธีนี้จะลบสีเข้มของทั้งสองสีออกจากสีที่สว่างที่สุด |
| 12 | โหมดผสมแบบผสมผสาน: การแยก ; | ไม่รวม : คล้ายกับความแตกต่าง แต่มีคอนทราสต์ต่ำกว่า |
| 13 | โหมดมิกซ์เบลนด์: เว้ ; | ฮิว : สร้างสีโดยการรวมเฉดสีของเนื้อหาเข้ากับความอิ่มตัวและความสว่างของพื้นหลัง |
| 14 | โหมดผสมผสม: ความอิ่มตัว ; | ความอิ่มตัว : สร้างสีด้วยความอิ่มตัวของเนื้อหา ตลอดจนเฉดสีและความสว่างของพื้นหลัง |
| 15 | โหมดผสมผสม: สี ; | การผสมสี: สร้างสีตามเฉดสีและความอิ่มตัวของเนื้อหาและความสว่างของพื้นหลัง |
| 16 | โหมดมิกซ์เบลนด์: ความส่องสว่าง ; | ความส่องสว่าง : สร้างสีตามความส่องสว่างของเนื้อหา รวมถึงเฉดสีและความอิ่มตัวของพื้นหลัง นี่คือสิ่งที่ตรงกันข้ามกับคุณสมบัติของสี |
ปกติ : คุณลักษณะนี้ไม่ใช้การผสมใดๆ เลยคูณ : องค์ประกอบจะถูกคูณด้วยพื้นหลังและแทนที่สีพื้นหลัง สีที่ได้จะมืดเท่ากับพื้นหลังเสมอ หน้าจอ : คูณพื้นหลังและเนื้อหาจากนั้นจะเสริมผลลัพธ์ ส่งผลให้เนื้อหาสว่างกว่าพื้นหลังสีซ้อนทับ : คูณหรือคัดกรองเนื้อหาขึ้นอยู่กับสีพื้นหลัง นี่คือสิ่งที่ตรงกันข้ามของโหมดผสมผสานแสงยาก Darken : พื้นหลังจะถูกแทนที่ด้วยเนื้อหาที่มีเนื้อหาอยู่ เข้มขึ้น มิฉะนั้นจะปล่อยไว้เหมือนเดิมlighten : พื้นหลังจะถูกแทนที่ด้วยเนื้อหาที่มีเนื้อหาจางลง color-dodge : คุณลักษณะนี้จะทำให้สีพื้นหลังสว่างขึ้นเพื่อสะท้อนสีของเนื้อหา color-burn : จะทำให้พื้นหลังมืดลง เพื่อสะท้อนสีธรรมชาติของเนื้อหา แสงแข็ง : ขึ้นอยู่กับสีของเนื้อหา คุณลักษณะนี้จะคัดกรองหรือคูณ สีอ่อน : ขึ้นอยู่กับสีของเนื้อหา สิ่งนี้จะทำให้เข้มขึ้นหรือจางลง ความแตกต่าง : สิ่งนี้จะลบความมืดออก ของทั้งสอง สีจากสีที่สว่างที่สุด การแยก : คล้ายกับความแตกต่างแต่คอนทราสต์ต่ำกว่า hue : สร้างสีที่มีเฉดสีของเนื้อหารวมกับความอิ่มตัวของสีและความส่องสว่างของพื้นหลัง ความอิ่มตัว : สร้างสีที่มีความอิ่มตัวของเนื้อหารวมกับ เฉดสีและความส่องสว่างของพื้นหลัง color : สร้างสีที่มีเฉดสีและความอิ่มตัวของเนื้อหาและความส่องสว่างของพื้นหลัง luminosity : สร้างสีที่มีความส่องสว่างของเนื้อหาและเฉดสีและ ความอิ่มตัวของพื้นหลัง นี่คือค่าผกผันของแอตทริบิวต์สี
คลิกแสดงเอฟเฟกต์
การประยุกต์ใช้แอตทริบิวต์โหมดมิกซ์เบลนด์
<!DOCTYPE html>
<html lang="th">
<หัว>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</title>
<สไตล์>
-
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
-
.คอนเทนเนอร์ {
/* กำหนดตัวแปร */
--มิกซ์-เบลนด์-โหมด: ปกติ;
ตำแหน่ง: ญาติ;
ความกว้าง: 300px;
ความสูง: 400px;
ระยะขอบ: 60px;
ช่องว่างภายใน: 20px;
กล่องเงา: 0 0 6px 1px #999;
รัศมีเส้นขอบ: 6px;
คาเร็ตสี: โปร่งใส;
-
h3,
ชั่วโมง4 {
ขอบล่าง: 10px;
-
.กล่องข้อมูล {
ความกว้าง: 100%;
ส่วนสูง: 24px;
ความสูงของบรรทัด: 24px;
-
.วงกลม {
ตำแหน่ง: แน่นอน;
ความกว้าง: 200px;
ความสูง: 200px;
รัศมีชายแดน: 50%;
โหมดมิกซ์เบลนด์: var (- โหมดมิกซ์เบลนด์);
-
.red กล่อง {
ซ้าย: 70px;
ด้านบน: 160px;
สีพื้นหลัง: สีแดง;
-
.green-box {
ซ้าย: 30px;
ด้านบน: 220px;
สีพื้นหลัง: เขียวอ่อน;
-
.กล่องสีฟ้า {
ซ้าย: 110px;
ด้านบน: 220px;
สีพื้นหลัง: สีฟ้า;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="คอนเทนเนอร์">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
<h4 class="value-box"></h4>
<div class="กล่องข้อมูล"></div>
<div class="วงกลมกล่องสีแดง"></div>
<div class="วงกลมกล่องสีเขียว"></div>
<div class="วงกลมกล่องสีฟ้า"></div>
</div>
</ร่างกาย>
<สคริปต์>
// รับองค์ประกอบ var container = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//รายการค่าและคำอธิบายของแอตทริบิวต์ mix-blend-mode;
ค่า var = [
-
รหัส: 1,
ชื่อ: "ปกติ",
ค่า: "ปกติ",
ข้อมูล: "คุณสมบัตินี้ไม่ได้ใช้การผสมใดๆ"
-
-
รหัส: 2,
ชื่อ: "คูณ"
ค่า: "คูณ"
ข้อมูล: "องค์ประกอบจะถูกคูณด้วยพื้นหลังและแทนที่สีพื้นหลัง สีที่ได้จะมืดเท่ากับพื้นหลังเสมอ"
-
-
รหัส: 3,
ชื่อ: "โอเวอร์เลย์"
ค่า: "โอเวอร์เลย์",
ข้อมูล: "คูณหรือมาสก์เนื้อหาตามสีพื้นหลัง ซึ่งตรงกันข้ามกับโหมดการผสมแสงจ้า"
-
-
รหัส: 4,
ชื่อ: "หน้าจอ",
ค่า: "หน้าจอ",
ข้อมูล: "คูณพื้นหลังและเนื้อหาแล้วเสริมผลลัพธ์ ซึ่งจะส่งผลให้เนื้อหาสว่างกว่าสีพื้นหลัง"
-
-
รหัส: 5,
ชื่อ: "มืด",
ค่า: "มืดลง",
ข้อมูล: "เมื่อเนื้อหามืดลง พื้นหลังจะถูกแทนที่ด้วยเนื้อหา ไม่เช่นนั้นเนื้อหาจะยังคงเหมือนเดิม"
-
-
รหัส: 6,
ชื่อ: "สดใส",
ค่า: "เบาลง",
ข้อมูล: "พื้นหลังถูกแทนที่ด้วยเนื้อหาที่สว่างกว่า"
-
-
รหัส: 7,
ชื่อ: "สีจางลง",
ค่า: "สีหลบ",
ข้อมูล: "คุณสมบัตินี้ทำให้สีพื้นหลังสว่างขึ้นเพื่อสะท้อนสีของเนื้อหา"
-
-
รหัส: 8,
ชื่อ: "สีจางลง",
ค่า: "การเผาสี",
ข้อมูล: "จะทำให้พื้นหลังมืดลงเพื่อสะท้อนสีธรรมชาติของเนื้อหา"
-
-
รหัส: 9,
ชื่อ: "แสงแข็ง",
ค่า: "ฮาร์ดไลท์",
ข้อมูล: "คุณสมบัตินี้จะกรองหรือคูณเนื้อหาตามสี"
-
-
รหัส: 10,
ชื่อ: "แสงอ่อน",
ค่า: "แสงนุ่มนวล",
ข้อมูล: "สิ่งนี้จะเข้มขึ้นหรือจางลง ทั้งนี้ขึ้นอยู่กับสีของเนื้อหา"
-
-
รหัส: 11,
ชื่อ: "ความแตกต่าง"
ค่า: "ความแตกต่าง"
ข้อมูล: "การดำเนินการนี้จะลบสีเข้มของทั้งสองสีออกจากสีที่สว่างที่สุด"
-
รหัส: 12,
ชื่อ: "ไม่รวม"
ค่า: "การยกเว้น",
ข้อมูล: "คล้ายกับความแตกต่าง แต่มีคอนทราสต์น้อยกว่า"
-
-
รหัส: 13,
ชื่อ: "เว้"
ค่า: "ฮิว",
ข้อมูล: "สร้างสีโดยการรวมเฉดสีของเนื้อหาเข้ากับความอิ่มตัวของสีและความสว่างของพื้นหลัง"
-
-
รหัส: 14,
ชื่อ: "ความอิ่มตัว"
ค่า: "ความอิ่มตัว"
ข้อมูล: "สร้างสีจากความอิ่มตัวของเนื้อหา ตลอดจนเฉดสีและความสว่างของพื้นหลัง"
-
-
รหัส: 15,
ชื่อ: "ผสมสี",
ค่า: "สี",
ข้อมูล: "สร้างสีตามเฉดสีและความอิ่มตัวของเนื้อหาและความสว่างของพื้นหลัง"
-
-
รหัส: 16,
ชื่อ: "ความสว่าง",
ค่า: "ความสว่าง",
ข้อมูล: "สร้างสีตามความสว่างของเนื้อหา ตลอดจนเฉดสีและความอิ่มตัวของพื้นหลัง ซึ่งตรงกันข้ามกับคุณสมบัติของสี"
-
-
เปลี่ยนโหมด();
//เปลี่ยนโหมดมิกซ์เบลนด์
ฟังก์ชั่น changeMode() {
ให้ดัชนี = 0;
modAttr(ดัชนี);
ให้ timerId = setInterval(() => {
ถ้า (ดัชนี >= ค่าความยาว) {
clearInterval(รหัสตัวจับเวลา);
กลับ;
-
ดัชนี++;
modAttr(ดัชนี)
}, 3000)
-
ฟังก์ชั่น modAttr (ดัชนี) {
//ตั้งค่าคุณสมบัติของ mix-blend-mode container.style.setProperty('--mix-blend-mode',values[index].value);
valueBox.innerHTML = `โหมดผสมผสานผสม : ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
-
</สคริปต์>
</html>หลายครั้งที่ต้องแสดงข้อความข้างรูปภาพ หากสีของข้อความและรูปภาพอยู่ใกล้กัน ความสามารถในการอ่านจะได้รับผลกระทบอย่างมาก
ฉันจะทำให้ข้อความปรับเข้ากับพื้นหลังโดยอัตโนมัติได้อย่างไร
คุณสามารถใช้แอตทริบิวต์ mix-blend-mode เพื่อตั้งค่าการผสมสีของข้อความและพื้นหลังเพื่อให้ได้เอฟเฟกต์ของข้อความที่ปรับให้เข้ากับพื้นหลัง
สีข้อความเป็นสีขาว บางภาพอ่านได้ไม่ดี
.กริดรายการ > h3 {
สี: RGB (255, 255, 255);
-
-
ตั้งค่าแอตทริบิวต์ mix-blend-mode เป็นความแตกต่าง ;
ค่าเริ่มต้นของสีข้อความคือสีขาว แต่ความแตกต่างจะถูก คำนวณ ด้วย ค่าสีของแต่ละพิกเซล ที่สอดคล้องกับพื้นหลังขององค์ประกอบหลักเพื่อให้ได้ค่าสีใหม่
ค่าสีข้อความ - ค่าสีพื้นหลัง = ค่าพิกเซลแบบผสม (แต่ละพิกเซล)
ตัวอย่างเช่น: สีข้อความ (255, 255, 255), สีพื้นหลัง (255, 255, 255), ค่าที่คำนวณได้ (0, 0, 0) แสดงเป็นสีดำ
.กริดรายการ>h3 {
สี: RGB (255, 255, 255);
/* ตั้งค่าโหมดการผสม -- คำนวณความแตกต่าง */
โหมดมิกซ์เบลนด์: ความแตกต่าง;
-
-หมายเหตุ: โหมดการผสมความแตกต่างที่นี่ใช้กับข้อความ
<!DOCTYPE html>
<html lang="th">
<หัว>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>ข้อความปรับให้เข้ากับพื้นหลังอย่างชาญฉลาด</title>
<สไตล์>
-
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
-
.คอนเทนเนอร์ {
จอแสดงผล: ดิ้น;
ความกว้าง: 100vw;
ความสูง: 60vh;
ปรับเนื้อหา: กึ่งกลาง;
จัดรายการ: กึ่งกลาง;
-
.grid-คอนเทนเนอร์ {
จอแสดงผล: ตาราง;
ตารางเทมเพลตคอลัมน์: 400px 400px 400px;
ตารางเทมเพลตแถว: 200px 200px;
ช่องว่าง: 10px;
-
.grid-รายการ {
พื้นหลังซ้ำ: ไม่ซ้ำ;
ขนาดพื้นหลัง: ปก;
รัศมีเส้นขอบ: 6px;
กล่องเงา: 0 0 6px 1px #999;
-
.กริดรายการ>h3 {
สี: RGB (255, 255, 255);
ขนาดตัวอักษร: 36px;
/* ตั้งค่าโหมดการผสม -- คำนวณความแตกต่าง */
โหมดมิกซ์เบลนด์: ความแตกต่าง;
-
.grid-item:nth-child(1) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_1.jpg"); */
สีพื้นหลัง: สีแดง
-
.grid-item:nth-child(2) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_2.jpg"); */
สีพื้นหลัง: สีม่วง;
-
.grid-item: n-child (3) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_3.jpg"); */
สีพื้นหลัง: สีเหลือง;
-
.grid-item: n-child (4) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_4.jpg"); */
สีพื้นหลัง: สีเขียว;
-
.grid-item:nth-child(5) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_5.jpg"); */
สีพื้นหลัง: ฟ้าอมเขียว;
-
.grid-item: n-child (6) {
/* ภาพพื้นหลัง: url("D:\test\zyl-img\bg_6.jpg"); */
สีพื้นหลัง: สีฟ้า;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="คอนเทนเนอร์">
<div class="ตารางคอนเทนเนอร์">
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
<div class="grid-item">
<h3>การประยุกต์ใช้แอตทริบิวต์โหมดผสมผสาน</h3>
</div>
</div>
</div>
</ร่างกาย>
</html>นี่เป็นการสรุปบทความนี้เกี่ยวกับคำอธิบายโดยละเอียดของแอตทริบิวต์ mix-blend-mode ใน CSS (การตั้งค่าโหมดมิกซ์ขององค์ประกอบ) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ css mix-blend-mode โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือ เรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป และฉันหวังว่าคุณจะสนับสนุน downcodes.com ในอนาคต!