كيفية إنشاء صور خلفية ذات تدرج رمادي باستخدام CSS

في هذا العصر الذي يتميز بتصميمات الويب النابضة بالحياة والديناميكية، من الضروري أحيانًا دمج لمسة من البساطة الدقيقة. إحدى الطرق لتحقيق ذلك هي تحويل صور الخلفية إلى تدرج رمادي، والذي يمكن أن يضفي جمالية كلاسيكية أو عتيقة على موقع الويب.

مرشحات CSS3 عبر المتصفحات

الطريقة الأكثر مباشرة لتدرج الخلفية الرمادية الصورة هي تطبيق تدرج الرمادي لمرشح CSS3:

-webkit-filter: grayscale(100%);

ومع ذلك، فإن هذه التقنية تعمل فقط في Chrome v.15 وSafari v.6 بسبب قيود توافق المتصفح.

مرشح SVG عبر المتصفحات

لتحقيق تأثيرات التدرج الرمادي عبر المتصفحات، يمكنك استخدام مرشحات SVG:

filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

يعمل هذا الحل في معظم المتصفحات الرئيسية، بما في ذلك Firefox وChrome وEdge.

jQuery Animation

إذا كنت تريد تبديل تأثير التدرج الرمادي ديناميكيًا باستخدام JavaScript، فيمكنك استخدام jQuery:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

سيضيف هذا الرمز فئة تدرج رمادي وسيؤدي إلى تلاشي الصورة عند تمرير مؤشر الماوس فوقها.

التوافق مع IE10-11

في Internet Explorer 10-11، SVG أعلاه تقنية التصفية لا تعمل. بدلاً من ذلك، يمكنك استخدام مرشح إزالة التشبع:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

يمكن تطبيق هذا الفلتر على الصور باستخدام سمة الفلتر.

من خلال استخدام هذه الطرق، يمكنك بسهولة تدرج صور الخلفية إلى اللون الرمادي في CSS، مما يضيف لمسة خالدة إلى الويب الخاص بك التصاميم مع الحفاظ على التوافق عبر المتصفحات.