باستخدام العفاريت مع علامة IMG؟

StackOverflow https://stackoverflow.com/questions/4335957

سؤال

أنا أفهم كيفية استخدام العفاريت ، ومع ذلك ، ليست سمة "SRC" مطلوبة لعلامات IMG؟ يمكنني دائمًا استخدام فترة أو علامة أخرى وتعيين الخلفية/العرض/الخ ، لكن لن يكون صحيحًا بشكل دلالي.

في الأساس ، أود حذف SRC للحصول على علامة IMG واستخدام العفاريت فقط ، لكنني قلق من عدم صحة HTML من الناحية الفنية بسبب ذلك. شكرًا.

هل كانت مفيدة؟

المحلول

حول الصواب الدلالي:

عندما يكون للصورة معنى دلالي ، لذلك يعتبر راضيا ، استخدم علامة IMG, ، بدون العفاريت ، وإعداد بديل بشكل صحيح.

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

نصائح أخرى

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

http://tjkdesign.com/articles/how-to_use_sprites_with_my_image_replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

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

يمكنني استخدام GIF شفاف 1x1 (ما يسمى الفضاء) ل SRC. ثم اضبط صورة الخلفية لتلك علامة IMG مع موضع BG المقابل. وبهذه الطريقة ، يمكنك استخدام سرعة العفاريت والحفاظ على الدلالي من الكود الخاص بك (لا يزال بإمكانك استخدام سمة ALT)

يمكنني دائمًا استخدام فترة أو علامة أخرى وتعيين الخلفية/العرض/الخ ، لكن لن يكون صحيحًا بشكل دلالي

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

إليكم المرجع على علامات IMG في W3C: http://www.w3

وقراءة إضافية صغيرة: http://www.w3.org/tr/html4/struct/global.html#h-7.5.3

تحدد هذه العناصر أن المحتوى مضمّن (span) أو مستوى الكتلة (DIV) ولكن لا تفرض تعابير تقديرية أخرى على المحتوى. وبالتالي ، قد يستخدم المؤلفون هذه العناصر بالتزامن مع أوراق الأنماط ، وسمة Lang ، وما إلى ذلك ، لتصميم HTML على احتياجاتهم وأذواقهم.

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

يمكنك حل هذا عن طريق إعادة التفكير في خياراتك.

يمكنك إنشاء منطقة محددة مع ملف <a> مع display:block; أو <div> والاستخدام overflow hidden; لإخفاء الفائض و position:relative;.

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

ثم استخدام :hover على الصورة لتغيير الموضع.

الآن يعتمد Sprite الخاص بك على علامة IMG ، بحيث يمكنك استخدامك alt نص.

يعتمد المثال التالي على Sprite على Facebook مع نسختين من الرمز أعلى بعضها البعض ، كل 50 بكسل في 50 بكسل ، وهو ارتفاع إجمالي الصورة 100 بكسل:

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top