كيفية طمس صورة في كس: طريقة سهلة وتقنيات طمس فعالة

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

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

مرشح: طمس (5 بكسل);

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

بالإضافة إلى ذلك ، هناك تقنيات أخرى فعالة للتشويش ، مثل استخدام العناصر الزائفة (::قبل و ::بعد) أو استخدام مرشح الباب الخلفي. تسمح لك العناصر الزائفة بإنشاء طبقات إضافية يمكنك من خلالها تطبيق تأثيرات مختلفة ، بما في ذلك التعتيم. على سبيل المثال:

سيقوم هذا الرمز بإنشاء عنصر زائف:: قبل لعنصر ديف وتطبيق طمس نصف قطر 10 بكسل على هذه الطبقة. سيؤدي ذلك إلى إنشاء تأثير ضبابي دون التأثير على الصورة نفسها.

1. تعلم كيفية طمس صورة في كس باستخدام طريقة بسيطة
2. استخدم مرشح" التمويه " لإنشاء تأثير ضبابي
3. تعلم تقنيات طمس أخرى مثل "مربع الظل" و "مستتر تصفية"
4. سؤال وجواب
5. كيف يمكنني طمس صورة في المغلق?
6. الذي يستخدم خاصية المغلق لطمس الصورة?
7. كيف يمكنني إنشاء تأثير صورة غير واضحة في المغلق?

تعلم كيفية طمس صورة في كس باستخدام طريقة بسيطة

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

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

إنشاء قاعدة كس لهذا العنصر وإضافة خاصية تصفية مع طمس القيمة. حدد مقدار التمويه باستخدام وحدات مثل وحدات البكسل (بكسل) أو النسب المئوية ( ٪ ).

مثال:

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

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

يرجى ملاحظة أن دعم خاصية التصفية قد يختلف من متصفح لآخر. لضمان التوافق مع المتصفحات المختلفة ، يوصى باستخدام بادئات البائع وقيمة النسخ الاحتياطي أو طرق بديلة لتعتيم الصورة.

الآن بعد أن عرفت طريقة سهلة لطمس صورة في كس باستخدام خاصية التصفية ، يمكنك استخدامها لإنشاء تأثيرات مثيرة للاهتمام على موقع الويب الخاص بك.

استخدم مرشح" التمويه " لإنشاء تأثير ضبابي

إذا كنت بحاجة إلى طمس صورة في كس للحصول على تأثير" فقدت "، يمكن أن يكون مرشح" طمس " أفضل صديق لك. يسمح لك بإنشاء تأثير غير واضح على أي عنصر ، بما في ذلك الصور.

لتطبيق هذا الفلتر ، يجب عليك استخدام خاصية كس " تصفية "مع قيمة"طمس". على سبيل المثال ، لطمس النص ، يمكنك استخدام القاعدة التالية:

نص الظل: 0 0 8 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

هنا نستخدم ظل النص مع قيم معينة لإنشاء تأثير غير واضح. يمكنك ضبط هذه القيم للحصول على النتيجة المرجوة.

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

آي إم جي {

مرشح: طمس (8 بكسل);

}

يضيف هذا الرمز ضبابية إلى الصورة المحددة باستخدام محدد" إمغ". تحدد القيمة "8 بكسل" درجة التمويه — فكلما ارتفعت القيمة ، زادت قوة التمويه.

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

ومع ذلك ، تجدر الإشارة إلى أن استخدام مرشح "التمويه" يمكن أن يؤثر على أداء موقع الويب الخاص بك ، خاصة إذا قمت بتطبيقه على صور كبيرة أو عناصر متعددة. لذلك ، من الصحيح تكوين استخدامه من أجل تحقيق التأثير المطلوب دون التضحية بالأداء.

تعلم تقنيات التعتيم الأخرى مثل "مربع الظل" و "مرشح الباب الخلفي"

بالإضافة إلى خاصية كس "تصفية: طمس ()" ، وهناك طرق أخرى من عدم وضوح الصور ، مثل استخدام "مربع الظل" و "مستتر تصفية".

تتيح لك خاصية" مربع الظل " إنشاء تأثير عدم وضوح خلفية الصورة عن طريق إضافة الظلال. لتطبيق طمس ، استخدم قيمة" طمس " لنصف قطر الظل. على سبيل المثال:

.صندوق {

العرض: 400 بكسل;

الارتفاع: 400 بكسل;

الخلفية-صورة: رابط (صورة.جي بي جي);

مربع الظل: 0 0 10 بكسل رغبا (0 ، 0 ، 0 ، 0.5);

}

في هذا المثال ، باستخدام خاصية" مربع الظل " ، يتم إنشاء تأثير عدم وضوح خلفية الصورة. قيمة "0 0 10 بكسل" يحدد دائرة نصف قطرها طمس ، و " رغبا(0, 0, 0, 0.5)" يحدد لون وشفافية الظل.

أسلوب آخر لتعتيم الصورة هو استخدام خاصية "مرشح الباب الخلفي". تتيح لك هذه الخاصية تطبيق تأثيرات المرشح على خلفية عنصر ما ، بما في ذلك التعتيم.

لتطبيق طمس باستخدام "مرشح الباب الخلفي " ، استخدم القيمة"طمس". على سبيل المثال:

.صندوق {

العرض: 400 بكسل;

الارتفاع: 400 بكسل;

الخلفية-صورة: رابط (صورة.جي بي جي);

مرشح الخلفية: طمس (10 بكسل);

}

في هذا المثال ، باستخدام خاصية" مرشح الباب الخلفي " ، يتم تطبيق تأثير عدم وضوح خلفية الصورة. تحدد القيمة "طمس(10 بكسل)" نصف قطر التمويه.

يرجى ملاحظة أن خاصية "مرشح الباب الخلفي" لها دعم محدود للمتصفح وقد لا تعمل في جميع الحالات. أيضا ، من أجل استخدام "مرشح الباب الخلفي" ، يجب أن يكون العنصر معتما.

التعلم واستخدام مختلف تقنيات طمس المغلق سوف تساعدك على إنشاء مجموعة متنوعة من الآثار وإعطاء نمط موقع الويب الخاص بك المزيد من الاهتمام والعمق.

سؤال وجواب

كيف يمكنني طمس صورة في المغلق?

في كس ، يمكنك طمس صورة باستخدام خاصية طمس. على سبيل المثال ، لطمس صورة الخلفية ، تحتاج إلى إضافة التعليمات البرمجية التالية إلى أنماط كس:

الذي يستخدم خاصية المغلق لطمس الصورة?

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

كيف يمكنني إنشاء تأثير صورة غير واضحة في المغلق?

يمكن استخدام طرق مختلفة لإنشاء تأثير صورة غير واضح في كس. على سبيل المثال ، يمكنك إضافة عامل تصفية طمس إلى عنصر باستخدام خاصية التصفية:طمس (). يمكنك أيضا استخدام العنصر الزائف:: بعد أو:: قبل وتعيينها على صورة خلفية مع طمس. طريقة أخرى هي استخدام مرشحات سفغ.