Get best of the week

[إشارة مرجعية] العمل مع الصور على الويب

أحد القرارات التي يجب على مطور الواجهة الأمامية اتخاذها عند إنشاء موقع ويب يتعلق باختيار كيفية تضمين الصور في صفحات الويب. قد تكون هذه الطريقة لاستخدام علامة HTML <img>. يمكن أن يكون هذا خاصية CSS backgroundأو علامة <image>عنصر <svg>. يعد اختيار النهج الصحيح للعمل مع الصور أمرًا مهمًا للغاية ، حيث يمكن أن يؤثر ذلك بشكل كبير على أداء المشروع وتوافره. المواد ، التي ننشر ترجمتها اليوم ، مخصصة لدراسة طرق مختلفة لتضمين الصور في صفحات الويب. هنا ، سيتم مناقشة مزايا وعيوب هذه الأساليب. بالإضافة إلى ذلك ، سنتحدث عن متى ولماذا يتم استخدامها عادة.





عنصر HTML <img>


يحتوي عنصر <img>في أبسط إصدارات استخدامه على السمة اللازمة للتشغيل الصحيح فقط src:

<img src="cool.jpg" alt="">

etting تحديد سمات العرض والارتفاع


إذا لم يتم ضبط عرض الصورة وارتفاعها ، فعند تحميل الصفحة ثم تحميل الصورة ، قد يلزم إعادة تصميم الصفحة. من أجل تجنب ذلك، يمكنك تعيين سمات widthو heightالعلامة <img>:

<img src="cool.jpg" width="200" height="100" alt="">

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


إطار من الفيديو. الصورة على اليسار ليس لها عرض وارتفاع. تم تحديد الصور الموجودة على اليمين.

يظهر هناNetworkشريط أدوات مطور المتصفح ويتم عرض عملية تحميل زوج من الصور. يقع واحد منهم على اليسار، ممثلة العلامة<img>، التي سماتwidthوheightلم يتم تعيين. في قيم أخرى يتم تعيين هذه السمات.

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

→ هنا مثال عملي

▍ إخفاء الصورة باستخدام CSS


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

إليك رمز CSS الذي يخفي الصورة:

img {
    display: none;
}

أكرر: باستخدام هذا النهج ، سيقوم المتصفح بتنزيل الصورة ، ويقوم بذلك حتى إذا تبين أنها غير مرئية. النقطة هنا هي أن العنصر <img>يعتبر عنصرًا قابلاً للاستبدال ، لذا فإن قدرتنا على إدارة مثل هذا العنصر من CSS محدودة.

availability حول توفر المحتوى


<img>يتم ضمان توفر الصور المعروضة على الصفحات باستخدام عنصر HTML من خلال سماتها alt. يجب أن تحتوي هذه السمة على وصف واضح للصورة. يمكن أن يكون هذا مفيدًا جدًا للمستخدمين الذين يستخدمون برامج قراءة الشاشة.

ومع ذلك ، إذا altلم تكن الصورة بحاجة إلى وصف ، فلا يزال من غير المستحسن حذف هذه السمة. والحقيقة هي أنه إذا تم ذلك ، فسيتم "التعبير" عن محتويات السمة src. هذا أمر سيئ للغاية لإمكانية الوصول إلى المحتوى.

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

لدينا بضع صور:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

srcتحتوي السمة على عنوان غير صحيح لملف الصورة ؛ لا يمكن للمستعرض تحميل هذا الملف. أول واحد <img>ليس لديها سمة alt، والثاني لديه السمة التي كتب سلسلة فارغة. كيف تعتقد أنه سيتم عرض هذه العناصر على الصفحة؟


على اليسار صورة بدون سمة alt. على اليمين - مع سمة alt فارغة.

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

ومع ذلك ، عندماaltتتم كتابة شيء مافي السمة، ستبدو الصورة مختلفة.


على اليمين توجد الصورة في سمة alt التي كُتب النص بها ،

وهذا أفضل بكثير من لا شيء. بالإضافة إلى ذلك ، إذا لم تتمكن من تحميل الملف المعروض<img>، يمكنك إضافة عنصر زائف إليه.

Images صور مستجيبة



صور بأحجام مختلفة

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

يمكن تخصيص مجموعة متجاوبة من الصور بطريقتين.

1. سمة srcset


إليك رمز الصورة الذي يستخدم السمة srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

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

2. عنصر صورة HTML


هذا هو الرمز الذي يستخدم العنصر <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

خيار آخر لإنشاء صور متجاوبة هو استخدام عنصر <picture>. أحب هذا النهج أكثر لأنه أبسط ولأنه يعطي نتائج أكثر قابلية للتنبؤ.

هنا مشروع تجريبي لهذا القسم.

▍ تغيير حجم الصور



على اليسار صورة لا تحتوي على مجموعة خصائص ملائمة لكائن CSS. على اليمين هو صورة التي لديها هذه المجموعة الملكية مع

خصائص CSSobject-fitوobject-positionهي أدوات عظيمة التي يمكنك استخدامها مع عنصر<img>. إنهم يعطوننا التحكم في كيفية تغير محتوى العنصر وموضعه<img>. يشبه هذا العمل مع خاصية CSSbackground. يمكن أن تحتوي

الخاصيةobject-fitعلى القيم التالية:fill،contain،cover،none،scale-down.

إليك كيفية استخدامه:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

الآن بعد أن اكتشفنا العنصر قليلاً <img>، حان الوقت للمضي قدمًا وإتقان تقنية معالجة الصورة التالية.

صور خاصية CSS


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

toكيفية استخدام خاصية خلفية CSS


لاستخدام خاصية CSS background، نحتاج أولاً إلى عنصر:

<div class="element">Some content</div>

ثم تحتاج إلى نمط:

.element {
    background: url('cool.jpg');
}

imagesقم بتعيين صور متعددة في خاصية الخلفية


ميزة لطيفة للصور المعروضة باستخدام خصائص CSS backgroundهي أنه يمكن أن يكون هناك العديد من هذه الصور. يمكن معالجة هذه الصور باستخدام CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍ إخفاء الصورة


باستخدام CSS ، يمكنك إخفاء وعرض الصور في منطقة عرض محددة. في نفس الوقت ، لن يتم تحميل الصور التي لن يتم عرضها. إذا لم يتم تكوين الصورة في CSS على أنها مرئية ، فلن يتم تحميلها. هذه ميزة إضافية لخاصية CSS backgroundعلى العنصر <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

يصف هذا المثال صورة خلفية يتم عرضها فقط عندما يكون عرض إطار العرض أكبر 700px.

availability حول توفر المحتوى


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

▍ صعوبات في تحميل صور الخلفية من قبل المستخدمين العاديين


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

Elements عناصر زائفة


يمكن أيضًا استخدام العناصر الزائفة مع الصور المحددة بواسطة خاصية CSS background. على سبيل المثال ، لعرض صورة فوق أخرى. في حالة عنصر ما ، <img>لا يمكن تحقيق ذلك إلا باستخدام عنصر إضافي متراكب على عنصر آخر.

الآن دعونا نتحدث عن استخدام صور SVG

صور SVG


تتمثل القوة الرئيسية لصور SVG في القدرة على توسيعها دون فقدان الجودة. علاوة على ذلك <svg>، بالإضافة إلى صور SVG ، يمكن للعنصر أيضًا عرض ملفات JPG و PNG. إليك كود HTML لصورة SVG:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


يتم عرض صورة JPG عن طريق عنصر SVG هل

تنتبه للسمةpreserveAspectRatio؟ بفضله ، تحتل الصورة العرض والارتفاع الكامل للعنصر<svg>، دون التمدد وعدم الانكماش.

إذا كان عرض العنصر<image>أكبر ، فسوف يملأ العنصر الأصل (<svg>) في العرض ، لكنه لن يتمدد.


الصورة لا تتمدد.

هذا يشبه إلى حد كبير كيفية عمل خصائص CSSobject-fit: coverأوbackground-size: cover.

availability حول توفر المحتوى


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

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

هنا ، علاوة على ذلك ، يمكنك استخدام العنصر <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

iff صعوبات في تحميل صور <svg> من قبل المستخدمين العاديين


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

→ هنا مثال لهذا القسم

سيناريوهات لاستخدام طرق إخراج الصور المختلفة


قسم الصفحات معروض في الأعلى


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


الجزء العلوي من الصفحة مع الصورة والنقوش

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

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

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

  1. وهل الصورة مهمة من وجهة نظر المستخدم أم أنها لن تفقد أي شيء إذا لم تكن مرئية؟
  2. هل يجب عرض هذه الصورة في مناطق العرض بجميع الأحجام؟
  3. هل هذه الصورة ثابتة أم أنها تتغير ديناميكيًا (من CMS على سبيل المثال)؟

ضع في اعتبارك خيارين لحل هذه المشكلة.

الحل الأول للمشكلة


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

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

يتيح لك هذا الأسلوب تحقيق ما تريد ، background-imageيمكنك تغييره باستخدام JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundعرّفت العقار بأسلوب قابل للتضمين. على الرغم من أن هذا هو رمز العمل ، إلا أنه يبدو سيئًا وغير عملي.

ربما يمكنك استخدام متغيرات CSS هنا؟

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

هنا نتيجة دراسة الأسلوب.


دراسة نمط العنصر

الآن ، لتغيير صورة الخلفية ، نحتاج فقط إلى تغيير المتغير--bg-url. هذا أفضل مليون مرة من الأنماط المضمنة.

تحليل


  1. الحل المقترح للمشكلة هنا جيد فقط إذا كانت الصورة ليست مهمة بشكل خاص.
  2. قد تكون مناسبة إذا لم يتم التخطيط لتغيير الصورة ديناميكيًا ، وذلك باستخدام CMS المستخدمة في خلفية المشروع.

→ هنا مثال عملي

الحل الثاني للمشكلة


هنا سنستخدم أدوات إخراج صورة HTML:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

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

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

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

بالإضافة إلى ذلك ، ألاحظ أني أحب الصور <img>التي يمكنك استخدامها عند استخدامها ، حيث يمكنك استخدام آليات النسخ الاحتياطي التي تعمل إذا فشل تحميل ملف الصورة. مثل هذه الآلية المساعدة ، على سبيل المثال ، الإخراج بدلاً من صورة خلفية ملونة بسيطة ، ستسمح للمستخدمين على الأقل بقراءة النص:

.hero img {
    /*   */
    background: #2962ff;
  }


يتم عرض لون الخلفية إذا فشل تحميل الصورة.

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

→ هنا مثال عملي

logo شعار الموقع


الشعار مهم جدا. تضيف الشعارات تفردًا إلى المواقع. لعرض شعار على الصفحة ، يمكننا اللجوء إلى عدة احتمالات:

  • عنصر <img>يعرض صورة PNG أو JPG أو SVG.
  • صورة SVG مدمجة.
  • الصورة الخلفية.

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

الشعار مع تفاصيل كثيرة.


إذا كان الشعار يحتوي على العديد من التفاصيل أو يحتوي على العديد من الأشكال ، فقد لا يكون عرضه باستخدام صورة SVG المضمنة فكرة جيدة. في مثل هذه الحالة ، أوصي باستخدام علامة يتم <img>من خلالها عرض صورة PNG أو JPG أو SVG.


شعارات متنوعة

هنا هو الرمز لعرض شعار مشابه مخزّن بتنسيق SVG:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

شعار بسيط لتحريك



شعار متحرك بسيط

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

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

هنا الأنماط:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

هنا مشروع تجريبي لهذا القسم:

شعار مستجيب


عندما فكرت في الشعارات المتجاوبة ، تذكرت شعار مجلة Smashing. أنا أحب الطريقة التي يتغير حجمها. هنا تخطيط يوضح الشعار الأساسي والشعار المعروض في مناطق العرض الكبيرة.


الشعار المستجيب

لتنفيذ سلوك الشعار هذا ، يعتبر العنصر<picture>الذي يسمح لك بوصف نسختين من الشعارمثاليًا:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

في CSS ، تحتاج إلى تغيير عرض الشعار في حالة ما إذا كان عرض إطار العرض يساوي أو أكبر 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

أمامنا حل بسيط ومفهوم لمشكلة الشعارات المتجاوبة.

→ هنا مثال عملي لهذا القسم

الشعار مع التدرج



مثال على شعار بتدرج

عند العمل مع شعارات لها تدرج ، يجب أن تكون على دراية بأن تصدير مثل هذا الشعار من تطبيق تصميم ، مثل Adobe Illustrator أو Sketch ، يمكن أن يكون بعيدًا عن الكمال. أثناء هذه العملية ، قد ينكسر شيء في الشعار.

عند استخدام تنسيق SVG ، يمكنك بسهولة تطبيق لون متدرج على الشعار. في المثال التالي ، استخدمت<linearGradient>، مع تحديد سمة النصfill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ هنا مثال

v مستخدم افاتار


تأتي الصور الرمزية في العديد من الأشكال ، ولكن عادة ما تكون الصور الرمزية المربعة أو المستديرة. في هذا المثال ، أرغب في مشاركة نصيحة مهمة قد تجدها مفيدة.

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


زوج من الصور الرمزية الناجحة

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


صورة رمزية غير ناجحة

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


على اليسار صورة رمزية ذات خلفية فاتحة للغاية. على اليمين نتيجة حل هذه المشكلة ، هناك

عدة طرق لحل هذه المشكلة:

  • باستخدام <img>.
  • باستخدام <img>والعنصر المساعد <div>.
  • باستخدام <div>وخصائص CSS background.
  • باستخدام <image>ج <svg>.

ما هو الأنسب هنا؟ هيا نكتشف.

باستخدام <img>


كيفية حل هذه المشكلة؟ ربما - مجرد ضبط حدود العنصر؟ نحن نستكشف هذا الاحتمال (أعتذر فورًا عن حقيقة أنه غالبًا ما سترى صورتي).

إليك CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

هنا هو كيف يبدو.


لم تكن النتيجة كما هو متوقع: يقع الحد المظلم خارج حدود الصورة ،

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

باستخدام <img> والمساعد <div>


دعني أذكرك بأننا نواجه مهمة إضافة ظل داخلي للصورة. لا يمكننا حل هذه المشكلة باستخدام الظل الداخلي ( box-shadow) والكلمة الرئيسية inset، لأن عناصر HTML <img>لا تدعم الظل الداخلي. لحل هذه المشكلة ، تحتاج إلى وضع صورة رمزية في عنصر <div>واستخدام عنصر آخر ، الغرض الوحيد منه هو رسم حدود داخلية.

إليك كود HTML:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

هنا الأنماط:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

إذا كان العنصر <div>يحتوي على حدود مطلية باللون الأسود بنسبة 10 ٪ ، فهذا سيضمن أن هذا الحد لن يكون مرئيًا في الصورة المظلمة ، وسيكون ملحوظًا في الضوء ، مما يبرز حدوده. هنا هو كيف يبدو.


الحد الداخلي ، يمكن رؤيته فقط في الصور الساطعة

← إليك مثال لهذا القسم

باستخدام <div> وخاصية خلفية CSS


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


الصور الرمزية المنتشرة حول الصفحة.

HTML هنا سيكون:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

هنا هو النمط:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

هنا يمكنك العثور على مثال عملي.

باستخدام <image> في <svg>


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

إليك الترميز:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

أولاً ، دعنا نحلل هذا الرمز. إليك ما هو عليه:

  1. قناع يقطع صورة دائرة.
  2. المجموعة التي ينطبق عليها القناع.
  3. الصورة نفسها مع السمة preserveAspectRatio=«xMidYMid».
  4. دائرة تستخدم كحد داخلي.

إليك كيفية تصميمه:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ هنا يمكنك العثور على مثال

مع الصور الرمزية ، اكتشفنا ذلك. لذلك ، ننتقل.

field حقل الإدخال مع الرمز


هنا مثال لحقل الإدخال مع رمز.


حقل الإدخال برمز

مثل هذه الحقول شائعة جدًا. كيفية تجهيز حقل برمز؟ ماذا يحدث عندما يتلقى هذا المجال التركيز؟ استكشف هذه القضايا.

إليك كود HTML:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

أعتقد أن أفضل حل لهذه المشكلة هو استخدام صور الخلفية المحددة بواسطة CSS. إنه بسيط وسريع ولا يتطلب عناصر HTML إضافية:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

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

هنا مثال.

▍ أنماط CSS للطباعة


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

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

حاول عدم التضمين في الصفحات المخصصة لطباعة الصور المعروضة باستخدام خلفية خاصية CSS


إذا تم تضمين الصورة في الصفحة باستخدام خاصية CSS background، فلن تتم طباعتها. سيكون المكان الذي تم عرضه فيه فارغًا عند الطباعة. هذا ما أتحدث عنه.


المساحات الفارغة بدلاً من الصور المضمنة في الصفحة باستخدام خاصية خلفية CSS

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

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

في مثل هذه الحالات ، من الأفضل استخدام عنصر HTML <img>. تتم طباعة الصور المضمنة في الصفحة التي تستخدم هذا العنصر دون مشاكل.

→ هنا مثال

ملخص


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

القراء الأعزاء! هل واجهت مشاكل في عرض الصور على صفحات الويب؟

More articles:


All Articles