CSS خلفية تكرر من 300PX فصاعدا
-
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. مع ثعلب النار لتشخيص التقنيات بسهولة على مواقع الويب.