خلفية قابلة للتطوير HTML CSS جافا سكريبت

https://stackoverflow.com/questions/2200391

18-09-2019
|

سؤال

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

تشكرات،

elliott.

المحلول

لا يمكنك أن تفعل ذلك مع background-image, ، لأنه لا يدعم التحجيم. عليك أن تزويرها عن طريق وضع img العلامة التي تمتد 100٪ في كلا الاتجاهين ووضعها وراء المحتوى الخاص بك باستخدام تحديد المواقع المطلقة و z-index. وبعد شيء من هذا القبيل يجب أن تعمل:

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

وفي CSS:

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

لم يختبر ذلك، لكن ذلك يجب أن يمنحك بعض البداية على الأقل.

نصائح أخرى

ها هي الخدعة (من http://css-tricks.com/how-to-resizeable-background-image/)

تحديد صورتك مثل هذا:

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

و css الخاص بك مثل هذا:

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

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

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

بمجرد أن نقطنا الصورة الممتدة، كان تطبيقنا سريعا مرة أخرى وقد توقفنا عن المماطلة عن طريق اللعب مع الصورة؛)

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

لا تنتمي إلى StackOverflow