html-css التحكم في صورة الخلفية بملء الشاشة وتمتد وعدم تكرار العرض

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

تم تعيينه في CSS3

body {  
    background:#3d71b8 url(../back_main.png);  
    background-size: 100%;  
    background-position:center;  
}

لكن background-siz هي خاصية لـ CSS 3 ولا تدعمها جميع المتصفحات.

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

<div id="div1"><img src="img.jpg" /></div>

ثم أضف كود CSS:

div#div1{ 
position:fixed; 
top:0; 
left:0; 
bottom:0; 
right:0; 
z-index:-1; 
} 
div#div1 > img { 
height:100%; 
width:100%; 
border:0; 
}

التأثير النهائي:

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

هذه المقالةطبع،شكرا لك.

أعيد طبعه على: https://www.cnblogs.com/hwaggLee/p/5018485.html

توصية ذكية

كيفية عرض الصور بشكل مثالي في HTML ، لا تمتد الصور ، شاشة كاملة وما إلى ذلك.

خريطة التأثير: شفرة:...

مرر سريعًا بملء الشاشة للخلف

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

Android: تمتد صورة الخلفية.

الرابط الأصلي:https://blog.wanvale.com/archives/224/ وصف المشكلة في التصميم التالي ، من الواضح أن الخلفية ممتدة ، والتي هي غير ودية للغاية للتكيف متعدد الجوانب. لذا فإن الغرض من ذلك هو حل هذه المشكلة ...

عرض إعدادات Android بملء الشاشة

الطريقة الأولى: المحددة في الكود: ملاحظة: يجب كتابة setContentView بعد ضبط ملء الشاشة الطريقة الثانية: تعيينها في ملف AndroidManifest.xml في ملف styles.xml أسفل ملف القيم أسفل ملف الدقة ، حدد A...

صورة CSS لا تمتد العرض

...