يتم إيقاف تشغيل صورة الخلفية المركزية بمقدار 1 بكسل

Question

توجد صفحة الويب الخاصة بي في DIV بعرض 960 بكسل، وأقوم بتوسيط DIV هذا في منتصف الصفحة باستخدام الكود:

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

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

وهذا يحدث فقط في FF.

هل يعرف أحد الحل البديل؟

Answer 1

نعم إنها مسألة معروفةلسوء الحظ، يمكنك فقط إصلاح div وعرض الصورة، أو استخدام البرنامج النصي لتغيير خاصية stye.backgroundPosition ديناميكيًا.الحيلة الأخرى هي وضع تعبير على تعريف فئة CSS.

Answer 2

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

إعداد الحشو: 0px 0px 0px 1px؛يعمل على إصلاح المشكلة لـ IE.

كارلو كابوكاسا، ألعاب ترافيان

Answer 3

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

Answer 4

لقد تمكنت من حل هذه المشكلة باستخدام jQuery:

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

Answer 5

كان لي نفس المشكلة.

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

دعني اعلم ان كانت تعمل ل.

Answer 6

ماذا عن إنشاء div مجمّع بنفس صورة الخلفية.

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

يحتوي الغلاف على رقم زوجي، وستحتفظ الخلفية بنفس الموضع على أي حجم شاشة.