شرح تفصيلي لسمة mix-blend-mode في CSS (ضبط وضع المزج لعنصر ما)

الكاتب：Eve Cole وقت التحديث：2024-12-19 16:53:25

جدول المحتويات

1. مقدمة إلى سمة وضع المزج والمزج 2. قيم السمات الشائعة لوضع المزج والمزج 3. تطبيق سمة وضع المزج والمزج 1. تأثير التطبيق 2. التعليمات البرمجية ذات الصلة 4. خلفية التكيف الذكي للنص 1 النمط الأصلي 2. إضافة المزيج 3. كود التنفيذ

1. مقدمة إلى خاصية وضع المزج والمزج

تصف خاصية [ mix-blend-mode attribute ] في CSS كيفية مزج محتوى العنصر مع محتوى العنصر الأصلي المباشر للعنصر وخلفية العنصر ؛

يستخدم لتعيين وضع المزج بين الخلفية والمقدمة لعنصر ما، ويمكن استخدامه مع سمة صورة الخلفية لإنشاء مجموعة متنوعة من التأثيرات المرئية المختلفة؛

2. قيم السمات المشتركة لوضع المزيج والمزج

رقم سري	قيمة السمة	أوضاع المزج والتعليمات
1	وضع المزج: عادي ؛	عادي: هذه الخاصية لا تطبق أي مزج؛
2	وضع المزج والمزج: ضرب ؛	الضرب: يتم ضرب العنصر في الخلفية ويستبدل لون الخلفية، ويكون اللون الناتج دائمًا داكنًا مثل الخلفية؛
3	وضع المزج: التراكب ؛	التراكب: يضاعف المحتوى أو يخفيه بناءً على لون الخلفية، بدلاً من وضع المزج Hard Light؛
4	وضع المزج والمزج: الشاشة ؛	الشاشة: قم بضرب الخلفية والمحتوى، ثم قم بإكمال النتيجة. سيؤدي هذا إلى أن يكون المحتوى أفتح من لون الخلفية؛
5	وضع المزج والمزج: أغمق ؛	تغميق ؛ عندما يتم تعتيم المحتوى، سيتم استبدال الخلفية بالمحتوى، وإلا فسيبقى كما هو؛
6	وضع المزج والمزج: تفتيح ؛	تفتيح: يتم استبدال الخلفية بمحتوى أفتح؛
7	وضع المزج والمزج: مراوغة الألوان ؛	تفتيح اللون: تعمل هذه الخاصية على تفتيح لون الخلفية ليعكس لون المحتوى؛
8	وضع المزج والمزج: حرق اللون ؛	تفتيح اللون: يؤدي هذا إلى تغميق الخلفية لتعكس اللون الطبيعي للمحتوى؛
9	وضع المزج: الضوء الصلب ؛	الضوء الصلب: اعتمادًا على لون المحتوى، ستقوم هذه الخاصية بتصفيته أو مضاعفةه؛
10	وضع المزج: ضوء ناعم ؛	الضوء الناعم: اعتمادًا على لون المحتوى، سيؤدي ذلك إلى تغميقه أو تفتيحه؛
11	وضع المزج والمزج: الفرق ؛	الفرق : سيؤدي هذا إلى طرح اللونين الأغمق من اللون الأفتح؛
12	وضع المزج والمزج: الاستبعاد ؛	استبعاد : يشبه الفرق، ولكن مع تباين أقل؛
13	وضع المزج: اللون ؛	Hue : لإنشاء لون من خلال الجمع بين لون المحتوى وتشبع الخلفية وسطوعها؛
14	وضع المزج والمزج: التشبع ؛	التشبع : إنشاء اللون من خلال تشبع المحتوى ودرجة سطوع الخلفية.
15	وضع المزج والمزج: اللون ؛	مزج الألوان: قم بإنشاء ألوان بناءً على درجة اللون وتشبع المحتوى وسطوع الخلفية؛
16	وضع المزج: اللمعان ؛	اللمعان : ينشئ ألوانًا بناءً على سطوع المحتوى ودرجة تشبع الخلفية. وهذا عكس خاصية اللون؛

عادي: لا تنطبق هذه السمة على أي مزج على الإطلاق. الضرب: يتم ضرب العنصر في الخلفية ويستبدل لون الخلفية، ويكون اللون الناتج دائمًا داكنًا مثل الخلفية. الشاشة: يضاعف الخلفية والمحتوى ثم يكمل النتيجة ينتج عنه محتوى أكثر سطوعًا من لون الخلفية. تراكب: يضاعف المحتوى أو يعرضه اعتمادًا على لون الخلفية. وهذا هو عكس وضع مزج الضوء الثابت. داكن: يتم استبدال الخلفية بالمحتوى الذي يوجد فيه المحتوى أغمق, بخلاف ذلك، يتم تركها كما كانت. تفتيح: يتم استبدال الخلفية بالمحتوى حيث يكون المحتوى أفتح.color-dodge: تعمل هذه الخاصية على تفتيح لون الخلفية ليعكس لون المحتوى.color-burn : يؤدي إلى تعتيم الخلفية لتعكس اللون الطبيعي للمحتوى.hard-light: اعتمادًا على لون المحتوى، ستقوم هذه الخاصية بإظهاره أو مضاعفة لونه.soft-light: اعتمادًا على لون المحتوى، سيؤدي ذلك إلى تغميقه أو تفتيحه. من الاثنين الألوان من اللون الأخف.الاستبعاد: مشابه للاختلاف ولكن مع تباين أقل.التدرج اللوني: ينشئ لونًا بتدرج لون المحتوى مدمجًا مع تشبع الخلفية وإضاءةها.التشبع: ينشئ لونًا بتشبع المحتوى مدمجًا مع درجة اللون وإضاءة الخلفية. اللون: ينشئ لونًا مع درجة اللون وتشبع المحتوى وإضاءة الخلفية. اللمعان: ينشئ لونًا مع لمعان المحتوى ودرجة اللون و تشبع الخلفية هذا هو عكس سمة اللون.

3. تطبيق سمة وضع المزج والمزج

1. تأثير التطبيق

انقر فوق عرض التأثير

تطبيق سمة وضع المزيج والمزج

2. الرموز ذات الصلة

 <!DOCTYPE html>
<html لانج="ar">
<الرأس>
<ميتا محارف = "UTF-8">
<meta name="viewport" content="width=device-width, original-scale=1.0">
<title>تطبيق سمة وضع المزج والمزج</title>
<نمط>
* {
الهامش: 0;
الحشو: 0؛
}
.حاوية {
/* تحديد المتغيرات */
--وضع الخلط: عادي؛
الموقف: نسبي؛
العرض: 300 بكسل؛
الارتفاع: 400 بكسل؛
الهامش: 60 بكسل؛
الحشو: 20 بكسل؛
ظل الصندوق: 0 0 6px 1px #999;
نصف قطر الحدود: 6 بكسل؛
لون الإقحام: شفاف؛
}
ح3,
ح4 {
الهامش السفلي: 10 بكسل؛
}
.صندوق المعلومات {
العرض: 100%؛
الارتفاع: 24 بكسل؛
ارتفاع الخط: 24 بكسل؛
}
دائرة {
الموقف: مطلق؛
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
نصف قطر الحدود: 50%؛
وضع المزج: var(--mix-blend-mode);
}
.الصندوق الأحمر {
اليسار: 70 بكسل؛
أعلى: 160 بكسل؛
لون الخلفية: أحمر؛
}
.المربع الأخضر {
اليسار: 30 بكسل؛
أعلى: 220 بكسل؛
لون الخلفية: أخضر فاتح؛
}
.الصندوق الأزرق {
اليسار: 110 بكسل؛
أعلى: 220 بكسل؛
لون الخلفية: أزرق؛
}
</نمط>
</الرأس>
<الجسم>
<div class="container">
<h3>تطبيق سمة وضع المزج والمزج</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="دائرة المربع الأزرق"></div>
</div>
</الجسم>
<النص البرمجي>
// الحصول على العناصر var Container = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
// قائمة القيم ووصف سمة وضع المزيج المختلط؛
قيم فار = [
{
المعرف: 1,
الاسم: "عادي"،
القيمة: "عادي"،
معلومات: "لا تطبق هذه الخاصية أي مزج؛"
},
{
المعرف: 2,
الاسم: "ضرب"،
القيمة: "تتضاعف"،
info: "يتم ضرب العنصر في الخلفية ويستبدل لون الخلفية. ويكون اللون الناتج دائمًا داكنًا مثل الخلفية؛"
},
{
المعرف: 3،
الاسم: "تراكب"،
القيمة: "تراكب"،
info: "مضاعفة أو إخفاء المحتوى بناءً على لون الخلفية؛ وهذا عكس وضع مزج الضوء القوي؛"
},
{
المعرف: 4,
الاسم: "الشاشة"،
القيمة: "الشاشة"،
info: "اضرب الخلفية والمحتوى ثم قم بإكمال النتيجة. سيؤدي ذلك إلى أن يكون المحتوى أفتح من لون الخلفية؛"
},
{
المعرف: 5،
الاسم: "الظلام"،
القيمة: "تغميق"،
info: "عندما يتم تعتيم المحتوى، سيتم استبدال الخلفية بالمحتوى، وإلا سيبقى كما هو؛"
},
{
المعرف: 6,
الاسم: "سطع"،
القيمة: "تفتيح"،
info: "تم استبدال الخلفية بمحتوى أخف؛"
},
{
المعرف: 7,
الاسم: "يتلاشى اللون"،
القيمة: "مراوغة اللون"،
info: "تعمل هذه الخاصية على تفتيح لون الخلفية ليعكس لون المحتوى؛"
},
{
المعرف: 8,
الاسم: "يتلاشى اللون"،
القيمة: "حرق اللون"،
info: "يؤدي هذا إلى تغميق الخلفية لتعكس اللون الطبيعي للمحتوى؛"
},
{
المعرف: 9,
الاسم: "الضوء الثابت"،
القيمة: "الضوء الصلب"،
info: "ستعمل هذه الخاصية على تصفية المحتوى أو ضربه بناءً على لونه."
},
{
المعرف: 10،
الاسم: "الضوء الناعم"،
القيمة: "خفيفة الوزن"،
info: "اعتمادًا على لون المحتوى، سيؤدي ذلك إلى تغميقه أو تفتيحه؛"
},
{
المعرف: 11,
الاسم: "الفرق"،
القيمة: "الفرق"،
معلومات: "سيؤدي هذا إلى طرح اللونين الأغمق من اللون الأفتح؛"
}, {
المعرف: 12،
الاسم: "استبعاد"،
القيمة: "الاستبعاد"،
info: "مشابه للاختلاف، ولكن مع تباين أقل؛"
},
{
المعرف: 13,
الاسم: "هيو"،
القيمة: "هوى"،
info: "إنشاء لون من خلال الجمع بين لون المحتوى وتشبع الخلفية وسطوعها؛"
},
{
المعرف: 14,
الاسم: "التشبع"،
القيمة: "التشبع"،
info: "إنشاء لون من تشبع المحتوى ودرجة سطوع الخلفية؛"
},
{
المعرف: 15,
الاسم: "مزيج الألوان"،
القيمة: "اللون"،
info: "إنشاء ألوان بناءً على درجة اللون وتشبع المحتوى وسطوع الخلفية؛"
},
{
المعرف: 16,
الاسم: "السطوع"،
القيمة: "اللمعان"،
info: "ينشئ لونًا بناءً على سطوع المحتوى ودرجة اللون وتشبع الخلفية. وهذا عكس خاصية اللون؛"
}
]
ChangeMode();
// تغيير وضع المزيج المختلط
وضع تغيير الوظيفة () {
دع الفهرس = 0؛
modAttr(index);
دع timerId = setInterval(() => {
إذا (الفهرس >= القيم. الطول) {
ClearInterval(timerId);
يعود؛
}
الفهرس++;
موداتر (الفهرس)
}، 3000)
}
وظيفة modAttr (الفهرس) {
// قم بتعيين قيمة خاصية وضع المزيج المختلط 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}`
}
</script>
</html>

4. يتكيف النص بذكاء مع الخلفية

في كثير من الأحيان، يجب عرض النص بجوار الصورة. إذا كان لون النص والصورة متقاربين، فستتأثر إمكانية القراءة بشكل خطير.

كيف يمكنني جعل النص يتكيف تلقائيًا مع الخلفية؟

يمكنك استخدام خاصية mix-blend-mode لتعيين مزيج الألوان للنص والخلفية لتحقيق تأثير تكيف النص مع الخلفية؛

1. النمط الأصلي

لون النص أبيض؛ إمكانية القراءة ضعيفة في بعض الصور؛

 .عنصر الشبكة > h3 {
اللون: رغب (255، 255، 255)؛
...
}

2. أضف إلى المزيج

اضبط سمة وضع المزج والمزج على الاختلاف ؛

القيمة الأولية للون النص هي الأبيض، ولكن سيتم حساب الفرق بقيمة اللون لكل بكسل يتوافق مع خلفية العنصر الأصلي للحصول على قيمة لون جديدة؛

قيمة لون النص - قيمة لون الخلفية = قيمة البكسل المختلطة (كل بكسل)

على سبيل المثال: لون النص (255، 255، 255)، لون الخلفية (255، 255، 255)، القيمة المحسوبة (0، 0، 0)، المعروضة باللون الأسود؛

 .عنصر الشبكة>h3 {
اللون: رغب (255، 255، 255)؛
/* ضبط وضع المزج - حساب الفرق */
وضع المزج والمزج: الفرق؛
...
}

ملاحظة: يتم تطبيق وضع مزج الفرق هنا على النص؛

3. قم بتنفيذ الكود

 <!DOCTYPE html>
<html لانج="ar">
<الرأس>
<ميتا محارف = "UTF-8">
<meta name="viewport" content="width=device-width, original-scale=1.0">
<title>يتكيف النص بذكاء مع الخلفية</title>
<نمط>
* {
الهامش: 0;
الحشو: 0؛
}
.حاوية {
العرض: فليكس؛
العرض: 100 فولت واط؛
الارتفاع: 60 فولت؛
ضبط المحتوى: مركز؛
محاذاة العناصر: مركز؛
}
حاوية الشبكة {
العرض: الشبكة؛
أعمدة قالب الشبكة: 400px 400px 400px;
صفوف قالب الشبكة: 200 بكسل 200 بكسل؛
الفجوة: 10 بكسل؛
}
.عنصر الشبكة {
تكرار الخلفية: عدم التكرار؛
حجم الخلفية: الغلاف؛
نصف قطر الحدود: 6 بكسل؛
ظل الصندوق: 0 0 6px 1px #999;
}
.عنصر الشبكة>h3 {
اللون: رغب (255، 255، 255)؛
حجم الخط: 36 بكسل؛
/* ضبط وضع المزج - حساب الفرق */
وضع المزج والمزج: الفرق؛
}
.عنصر الشبكة: nth-child(1) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_1.jpg");
لون الخلفية: أحمر
}
.عنصر الشبكة: nth-child(2) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_2.jpg");
لون الخلفية: أرجواني؛
}
.عنصر الشبكة: nth-child(3) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_3.jpg");
لون الخلفية: أصفر؛
}
.عنصر الشبكة: nth-child(4) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_4.jpg");
لون الخلفية: أخضر؛
}
.عنصر الشبكة: nth-child(5) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_5.jpg");
لون الخلفية: أزرق مخضر؛
}
.عنصر الشبكة: nth-child(6) {
/* صورة الخلفية: url("D:\test\zyl-img\bg_6.jpg");
لون الخلفية: أزرق؛
}
</نمط>
</الرأس>
<الجسم>
<div class="container">
<div class="grid-container">
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
<div class="عنصر الشبكة">
<h3>تطبيق سمة وضع المزج والمزج</h3>
</div>
</div>
</div>
</الجسم>
</html>

وبهذا تنتهي هذه المقالة حول الشرح التفصيلي لسمة mix-blend-mode في CSS (ضبط وضع المزج لعنصر ما. لمزيد من المعلومات حول سمة css mix-blend-mode، يرجى البحث في المقالات السابقة على downcodes.com أو). استمر في تصفح المقالات ذات الصلة أدناه، وآمل أن تدعم موقع downcodes.com في المستقبل!