عرض مصدر CSS/background-blend-mode

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-blend-mode</code>}}</noinclude>
الخاصية <code>background-attachment</code> في CSS تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.

يجب تعريف [[CSS/blend-mode|أنماط الامتزاج]] (blending modes) بنفس ترتيب ورود الصور في خاصية <code>[[CSS/background-image|background-image]]</code>؛ وإذا لم يكن طول قائمة القيم في كلا الخاصيتين متساوٍ، فستُكرَّر أو تحذف بعض القيم حتى تتساوى فيما بينها.

لاحظ أنَّه إذا استخدمنا الخاصية <code>[[CSS/background|background]]</code> المختصرة، فستؤدي إلى إعادة ضبط قيمة الخاصية <code>background-blend-mode</code> إلى قيمتها الافتراضية، لذا احرص على استعمال هذه الخاصية بعدها.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>normal</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! 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">
<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>
</syntaxhighlight>احرص على توفير صورتين باسم <code>image-1.png</code> و <code>image-2.png</code> كي يعمل المثال. شيفرة CSS:<syntaxhighlight lang="css">
#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">
document.getElementById("select").onchange = function(event) {
    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الرئيسي
|35
|30.0
|غير مدعومة
|22
|7.1
|}

== البنية العامة ==
=== <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> الذي يُحدِّد ما هو نمط الامتزاج المستخدم.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-blend-mode: <blend-mode>#;
</syntaxhighlight>يمكن تكرار القيم لتطبيقها على أكثر من فاصلة بفصلها بفاصلة <code>,</code>.<syntaxhighlight lang="css">
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

</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].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]