الفرق بين المراجعتين ل"CSS/background-blend-mode"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
 
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 96: سطر 96:
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مواصفة [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].
[[تصنيف:CSS]]
+
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
+
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background]]
+
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]

مراجعة 15:34، 28 يناير 2018

الخاصية background-attachment في CSS تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.

/* قيمة واحدة */
background-blend-mode: normal;

/* قيمتين، وكل قيمة تتبع لصورة خلفية مختلفة */
background-blend-mode: darken, luminosity;

/* القيم العامة */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

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

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

القيمة الابتدائية normal
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للحركة لا
القيمة المحسوبة كالقيمة المُحدَّدة.

أمثلة

هذا مثال تفاعلي يسمح لك باختيار أي نمط من أنماط الامتزاج وستظهر النتيجة مباشرةً. شيفرة 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

مصادر ومواصفات