الفرق بين المراجعتين ل"CSS/background-blend-mode"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
ط (←انظر أيضًا: خطأ في التنسيق) |
||
| (مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>background-blend-mode</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>background-blend-mode</code>}}</noinclude> | ||
| − | الخاصية <code>background-attachment</code> في CSS تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر. | + | الخاصية <code>background-attachment</code> في CSS تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر. |
| − | |||
| − | |||
| − | / | + | يجب تعريف [[CSS/blend-mode|أنماط الامتزاج]] (blending modes) بنفس ترتيب ورود الصور في خاصية <code>[[CSS/background-image|background-image]]</code>؛ وإذا لم يكن طول قائمة القيم في كلا الخاصيتين متساوٍ، فستُكرَّر أو تحذف بعض القيم حتى تتساوى فيما بينها. |
| − | background- | ||
| − | + | لاحظ أنَّه إذا استخدمنا الخاصية <code>[[CSS/background|background]]</code> المختصرة، فستؤدي إلى إعادة ضبط قيمة الخاصية <code>background-blend-mode</code> إلى قيمتها الافتراضية، لذا احرص على استعمال هذه الخاصية بعدها. | |
| − | |||
| − | |||
| − | |||
| − | < | ||
| − | + | == بطاقة الخاصية == | |
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 30: | سطر 23: | ||
! scope="row" |القيمة المحسوبة | ! scope="row" |القيمة المحسوبة | ||
|كالقيمة المُحدَّدة. | |كالقيمة المُحدَّدة. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* قيمة واحدة */ | ||
| + | background-blend-mode: normal; | ||
| + | |||
| + | /* قيمتين، وكل قيمة تتبع لصورة خلفية مختلفة */ | ||
| + | background-blend-mode: darken, luminosity; | ||
| + | /* القيم العامة */ | ||
| + | background-blend-mode: initial; | ||
| + | background-blend-mode: inherit; | ||
| + | background-blend-mode: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
هذا مثال تفاعلي يسمح لك باختيار أي نمط من أنماط الامتزاج وستظهر النتيجة مباشرةً. شيفرة HTML:<syntaxhighlight lang="html"> | هذا مثال تفاعلي يسمح لك باختيار أي نمط من أنماط الامتزاج وستظهر النتيجة مباشرةً. شيفرة HTML:<syntaxhighlight lang="html"> | ||
<div id="div"></div> | <div id="div"></div> | ||
<select id="select"> | <select id="select"> | ||
| − | + | <option>normal</option> | |
| − | + | <option>multiply</option> | |
| − | + | <option selected>screen</option> | |
| − | + | <option>overlay</option> | |
| − | + | <option>darken</option> | |
| − | + | <option>lighten</option> | |
| − | + | <option>color-dodge</option> | |
| − | + | <option>color-burn</option> | |
| − | + | <option>hard-light</option> | |
| − | + | <option>soft-light</option> | |
| − | + | <option>difference</option> | |
| − | + | <option>exclusion</option> | |
| − | + | <option>hue</option> | |
| − | + | <option>saturation</option> | |
| − | + | <option>color</option> | |
| − | + | <option>luminosity</option> | |
</select> | </select> | ||
</syntaxhighlight>احرص على توفير صورتين باسم <code>image-1.png</code> و <code>image-2.png</code> كي يعمل المثال. شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>احرص على توفير صورتين باسم <code>image-1.png</code> و <code>image-2.png</code> كي يعمل المثال. شيفرة CSS:<syntaxhighlight lang="css"> | ||
#div { | #div { | ||
| − | + | width: 300px; | |
| − | + | height: 300px; | |
| − | + | background: url('image-1.png'), url('image-2.png'); | |
| − | + | background-blend-mode: screen; | |
} | } | ||
</syntaxhighlight>شيفرة JavaScript المسؤولة عن تعديل نمط الامتزاج عند اختيار قيمة من قيم العنصر <code>[[HTML/select|<select>]]</code>:<syntaxhighlight lang="javascript"> | </syntaxhighlight>شيفرة JavaScript المسؤولة عن تعديل نمط الامتزاج عند اختيار قيمة من قيم العنصر <code>[[HTML/select|<select>]]</code>:<syntaxhighlight lang="javascript"> | ||
| سطر 83: | سطر 86: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value">[[CSS/blend-mode|<blend-mode>]]</code> === |
نمط الامتزاج <code>[[CSS/blend-mode|<blend-mode>]]</code> الذي يُحدِّد ما هو نمط الامتزاج المستخدم. | نمط الامتزاج <code>[[CSS/blend-mode|<blend-mode>]]</code> الذي يُحدِّد ما هو نمط الامتزاج المستخدم. | ||
| سطر 94: | سطر 97: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == انظر أيضًا == | ||
| + | *صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/background|background]]</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</code>، و <code>[[CSS/background-image|background-image]]</code>، و<code>[[CSS/background-origin|background-origin]]</code>، و <code>[[CSS/background-position|background-position]]</code>، و <code>[[CSS/background-repeat|background-repeat]]</code>، و <code>[[CSS/background-size|background-size]]</code> و <code>[[CSS/background-attachment|background-attachment]]</code>. | ||
| + | *صفحة العنصر <code>[[HTML/img|<img>]]</code> الذي يُستخدَم لإضافة صور إلى المستند. | ||
| + | *لإضافة لون بدلًا من الصورة، فاستخدام الخاصية <code>[[CSS/background-color|background-color]]</code>. | ||
| + | *انظر إلى صفحة أنماط الامتزاج <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value">[[CSS/blend-mode|<blend-mode>]]</code> لمزيدٍ من التفاصيل عنها. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.fxtf.org/compositing-1/#background-blend-mode Compositing and Blending Level 1]. | * مواصفة [https://drafts.fxtf.org/compositing-1/#background-blend-mode Compositing and Blending Level 1]. | ||
المراجعة الحالية بتاريخ 14:10، 17 مارس 2018
الخاصية background-attachment في CSS تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.
يجب تعريف أنماط الامتزاج (blending modes) بنفس ترتيب ورود الصور في خاصية background-image؛ وإذا لم يكن طول قائمة القيم في كلا الخاصيتين متساوٍ، فستُكرَّر أو تحذف بعض القيم حتى تتساوى فيما بينها.
لاحظ أنَّه إذا استخدمنا الخاصية background المختصرة، فستؤدي إلى إعادة ضبط قيمة الخاصية background-blend-mode إلى قيمتها الافتراضية، لذا احرص على استعمال هذه الخاصية بعدها.
بطاقة الخاصية
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كالقيمة المُحدَّدة. |
/* قيمة واحدة */
background-blend-mode: normal;
/* قيمتين، وكل قيمة تتبع لصورة خلفية مختلفة */
background-blend-mode: darken, luminosity;
/* القيم العامة */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
أمثلة
هذا مثال تفاعلي يسمح لك باختيار أي نمط من أنماط الامتزاج وستظهر النتيجة مباشرةً. شيفرة HTML:
<div id="div"></div>
<select id="select">
<option>normal</option>
<option>multiply</option>
<option selected>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
احرص على توفير صورتين باسم image-1.png و image-2.png كي يعمل المثال. شيفرة CSS:
#div {
width: 300px;
height: 300px;
background: url('image-1.png'), url('image-2.png');
background-blend-mode: screen;
}
شيفرة JavaScript المسؤولة عن تعديل نمط الامتزاج عند اختيار قيمة من قيم العنصر <select>:
document.getElementById("select").onchange = function(event) {
document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الرئيسي | 35 | 30.0 | غير مدعومة | 22 | 7.1 |
البنية العامة
<blend-mode>
نمط الامتزاج <blend-mode> الذي يُحدِّد ما هو نمط الامتزاج المستخدم.
البنية الرسمية
background-blend-mode: <blend-mode>#;
يمكن تكرار القيم لتطبيقها على أكثر من فاصلة بفصلها بفاصلة ,.
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
انظر أيضًا
- صفحة الخاصيات التي تضبطها الخاصية المختصرة
backgroundوهي:background-clip، وbackground-color، وbackground-image، وbackground-origin، وbackground-position، وbackground-repeat، وbackground-sizeوbackground-attachment. - صفحة العنصر
<img>الذي يُستخدَم لإضافة صور إلى المستند. - لإضافة لون بدلًا من الصورة، فاستخدام الخاصية
background-color. - انظر إلى صفحة أنماط الامتزاج
<blend-mode>لمزيدٍ من التفاصيل عنها.
مصادر ومواصفات
- مواصفة Compositing and Blending Level 1.