صورة الخلفية تظهر على رأس الصورة المقدمة في الأوبرا والكروم

https://stackoverflow.com/questions/2400884

18-09-2019
|

سؤال

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

لقد وضعت مثالتي هنا. وبعد يرجى الاطلاع على الكتلة مع 4 مستطيلات صغيرة.

يرجى اقتراح الحل.

المحلول

تحتاج إلى إضافة display:block إلى فصولك.

<span style="display:block; background: url(&quot;/resources/images/strength_bgr.gif&quot;) no-repeat scroll 0pt -20px transparent;">
  <img alt="test" src="/resources/images/strength.gif">
</span>

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

تحرير بعد التعليقات

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow