لقد تلقيت طلبًا اليوم لاستخدام تأثير التمويه Gaussian لتعتيم الصفحة، وقد انتهزت هذه الفرصة للتو لفرز واجهتي برمجة تطبيقات التمويه Gaussian في CSS3.
يوضح:
واجهة برمجة التطبيقات هذه عبارة عن مرشح لا يمكنه تحقيق التمويه الغاوسي فحسب، بل يمكنه أيضًا تحقيق العديد من الأشياء الأخرى مثل إزاحة اللون والتشبع والتدرج الرمادي وما إلى ذلك.
القواعد:
// استخدم المسافات لفصل مرشحات متعددة filter: none; // مرشح التمويه الغوسي: تمويه (4 بكسل) ؛ // مرشح السطوع الخطي: السطوع () ؛ // مرشح التباين: Contrast(); // مرشح تأثير الظل: drop-shadow(); // مرشح التدرج الرمادي: تدرج الرمادي ()؛ // مرشح دوران الصبغة: hue-rotate(); // عكس مرشح الصورة: invert(); // تحويل مرشح الشفافية: العتامة ()؛ // مرشح التشبع: saturate(); // مرشح البني: بني داكن ()؛ // مرشح مرشح SVG: url();
من بينها filter: blur();
يوضح:
عندما تقوم بإنشاء عنصر وإضافة هذه السمة، ستضيف تأثيرات (مثل التمويه أو تغيير اللون) إلى المنطقة الموجودة خلف العنصر.
مقابلة:
يجب تحميل سمة المرشح على الصورة أو صورة الخلفية، بينما يحتاج مرشح الخلفية إلى أن يكون عنصرًا فقط.
القواعد:
مرشح الخلفية: طمس (2 بكسل)؛ مرشح الخلفية: السطوع (60%)؛ مرشح الخلفية: التباين (40%)؛ مرشح الخلفية: الظل المسقط (4 بكسل 4 بكسل 10 بكسل أزرق)؛ مرشح الخلفية: تدرج الرمادي (30%)؛ مرشح الخلفية: تدوير درجة اللون (120 درجة)؛ مرشح الخلفية: معكوس (70%)؛ مرشح الخلفية: العتامة (20%)؛ مرشح الخلفية: بني داكن (90%)؛ مرشح الخلفية: مشبع (80%)؛
<!DOCTYPE html>
<html لانج="ar">
<الرأس>
<نمط>
.wrapBox2 {
العرض: 800 بكسل؛
الارتفاع: 300 بكسل؛
الفائض: مخفي؛
الموقف: نسبي؛
صورة الخلفية: url("./win.jpeg");
حجم الخلفية: 100% 100%؛
تكرار الخلفية: عدم التكرار؛
عامل التصفية: طمس (10 بكسل)؛
}
.الصندوق الفرعي {
الموقف: مطلق؛
العرض: كالك (100% - 100 بكسل)؛
الارتفاع: كالك (100% - 100 بكسل)؛
مؤشر z: 2؛
}
.نص {
الموقف: نسبي؛
/* فهرس z: 10؛
حجم الخط: 40 بكسل؛
وزن الخط: غامق؛
اللون: #f00؛
}
</نمط>
</الرأس>
<الجسم>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">طمس الكل</div>
</div>
</الجسم>
</html> 
شيء واحد يجب ملاحظته هنا هو أنه بعد إضافة التمويه، سيتجاوز الحجم الفعلي العرض والارتفاع الذي حددناه بسبب تأثير النتوء المحيط. يمكنك لف طبقة بالخارج وتعيين overflow: hidden;
<!DOCTYPE html>
<html لانج="ar">
<الرأس>
<نمط>
.wrapBox2 {
العرض: 800 بكسل؛
الارتفاع: 300 بكسل؛
/* الفائض: مخفي */
الموقف: نسبي؛
}
.الصندوق الفرعي {
العرض: 100%؛
الارتفاع: 100%؛
الموقف: مطلق؛
العرض: كالك (100% - 100 بكسل)؛
الارتفاع: كالك (100% - 100 بكسل)؛
مؤشر z: 2؛
عامل التصفية: طمس (10 بكسل)؛
}
.نص {
الموقف: نسبي؛
/* فهرس z: 10؛
حجم الخط: 40 بكسل؛
وزن الخط: غامق؛
اللون: #f00؛
}
</نمط>
</الرأس>
<الجسم>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">طمس الكل</div>
</div>
</الجسم>
</html> 
بهذه الطريقة، نظرًا لأن النص والصورة على نفس المستوى، يكون النص إما أسفل الصورة أو أعلى الصورة (يتم التحكم فيه وفقًا لمؤشر z) دون تشويش النص.
<!DOCTYPE html>
<html لانج="ar">
<الرأس>
<نمط>
.wrapBox2 {
العرض: 800 بكسل؛
الارتفاع: 300 بكسل؛
الفائض: مخفي؛
الموقف: نسبي؛
صورة الخلفية: url("./win.jpeg");
حجم الخلفية: 100% 100%؛
تكرار الخلفية: عدم التكرار؛
}
.الصندوق الفرعي {
الموقف: مطلق؛
العرض: كالك (100% - 100 بكسل)؛
الارتفاع: كالك (100% - 100 بكسل)؛
مؤشر z: 2؛
مرشح الخلفية: طمس (10 بكسل)؛
/* الأعلى: 100 بكسل */
}
.نص {
الموقف: نسبي؛
/* فهرس z: 10؛
حجم الخط: 40 بكسل؛
وزن الخط: غامق؛
اللون: #f00؛
}
</نمط>
</الرأس>
<الجسم>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">معتم جزئيًا</div>
</div>
</الجسم>
</html> 
كما ترون، لا يلزم تعيين سمة مرشح الخلفية على عنصر الصورة، ولكن أعتقد أن هذه الطريقة أكثر مرونة.
بالطبع، يمكن أن يؤدي استخدام مرشح الخلفية أيضًا إلى تلبية السيناريو الأول.
بهذا نختتم هذه المقالة حول استخدام CSS للمرشح ومرشح الخلفية لتحقيق تأثير التمويه Gaussian (نموذج للتعليمة البرمجية) لمزيد من محتوى CSS Gaussian Blur ذي الصلة، يرجى البحث في المقالات السابقة على downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه، كما آمل سوف تدعم downcodes.com أكثر في المستقبل!