CSS خلفية تكرر من 300PX فصاعدا

https://stackoverflow.com/questions/1845714

12-09-2019
|

سؤال

أتساءل عما إذا كان أي شخص يعرف كيفية تحقيق ما يلي - إلقاء نظرة على http://www.dspts.si.

أول 1 / 3RD من الشاشة لديه خلفية فارغة من هناك فصاعدا يجب أن يكون هناك تكرار نمط. لقد فعلت ذلك الآن، من خلال إنشاء نمط طويل جدا من PNG وقم بتعيينه على تعويض 300 وكرر x. ومع ذلك، أنا لست سعيدا بهذا المحلول لأنه سيسرع إذا كانت الصفحات قد تصبح وقتا أطول من صورة الخلفية PNG هي.

شكرا لأي اقتراحات!

المحلول

ضع نمط التكرار كخلفية ل html عنصر، ثم صورة بيضاء 1PX * 300PX كصورة خلفية ل body عنصر، وأنت كل مجموعة.

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

ليس لديك لاستخدام html و body العلامات لهذا، لكنها أسهل طريقة ولا تتطلب أي علامات جديدة.

نصائح أخرى

يمكنك تحديد خلفيات متعددة. يرى هل يمكنني الحصول على صور خلفية متعددة باستخدام CSS؟. وبعد التقنيات المذكورة هناك:

ضع الصفحة بأكملها في آخر <div> حاوية أو سوء استخدام <html> علامة لذلك.
هذا يعني أنك تحدد خلفية ل <body> وواحد ل <html>.
استخدم CSS3 الذي يدعم صور خلفية متعددة. هذا لم يدعم بعد من جميع المتصفحات المشتركة.

نعم، حدد صورة الخلفية الخاصة بك طبيعية ولكن تعيين background-position مثله:

background-position:0 300px;

سيؤدي ذلك إلى جعل صورة الخلفية تبدأ في 0px من اليسار و 300px من الأعلى.

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

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

لا تنتمي إلى StackOverflow