CSS مشكلة الخلفية المتكررة الثابتة

https://stackoverflow.com/questions/432784

10-07-2019
|

سؤال

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

إذا قمت بتحميل الموقع في نافذة صغيرة، ثم انتقل إلى اليمين، الخلفية لا تحمل على وخلفية عرض اللون بدلا من ذلك.

وأي أفكار؟

وCSS لالخلفية:

body {
    background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}

المحلول

وحاول CSS التالية:

body, html {
    color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}

body {
    font-size: 70%;
}

ويبدو (في كل من أوبرا وكروم) المتصفح هو علاج منطقة خارج العرض الأولي للمتصفح كجزء من العلامة HTML ولكن ليست جزءا من BODY. يمكنك التحقق من ذلك من خلال وضع خلفية الصورة على HTML ولكن ليس العلامة BODY - ثم نرى كيف يظهر فقط في مجال وثيقة التمرير إلى الرأي. ليس لدي فكرة لماذا يحدث هذا؟ - أي شخص

وفوق ظهر CSS لعلاج هذه المشكلة، بالرغم من ذلك.

نصائح أخرى

وكنت قد حددت خلفية الجسم: رابط في خط style.css 13، ولكن القواعد التي يحددها أيضا لخلفية الجسم في الحكم بدأت على خط 17

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

ويرجع ذلك إلى حقيقة أن يتم تعيين العلامة <body> افتراضيا إلى 100٪ من عرض نافذة المتصفح هذه - وليس الموقع. هذا يعني عندما عرض النافذة أقل من 960px - عرض موقع الويب الخاص بك، وكتلة الجسم ينتهي. لحل هذه المشكلة، مجرد مجموعة:

body {min-width: 960px}

ومما يؤسف له، مين العرض لا يعمل في الإصدارات القديمة من Internet Explorer بدون جافا سكريبت ودعا الإختراق <لأ href = "http://www.doxdesk.com/software/js/minmax.html" يختلط = "نوفولو noreferrer "> minmax . أود أن أقترح أرفق تضمين قانون جافا سكريبت لأنه داخل بعض التعليقات مشروطة لمنع طلب HTTP غير الضرورية والأخطاء التوافق المحتملة في متصفحات جديدة. لذلك تضمين minmax مثل ذلك:

<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>  
<![endif]-->

وأيضا، وهي غيض العام - هذه القضايا هي من السهل إلى حد ما إلى حل عن طريق اللعب مع الحرائق

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

لا تنتمي إلى StackOverflow