طبقات الصور في CSS - من الممكن وضع 2 الصور في نفس العنصر؟

Question

لنفترض أنا وضع صورة خلفية لصفحة ويب في CSS مثل هذا:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

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

عذرا، انها مسألة ساذج، ولكني سعيت إلى هذا الرقم وعلى الرغم من أنني لم تكن قادرة على العمل على انجاحه، وأنا أيضا لا يمكن العثور على slapdown واضح لفكرة أي مكان عبر الإنترنت ... لذلك، ليس هناك وسيلة، أم أن هذا مجرد لا يمكن أن تفعل؟

وشكرا!

Answer 1

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

وآمل أن يساعد هذا!

Answer 2

والخلفيات الطبقات هي جزء من CSS3 العمل مشروع ولكن، كما بقدر ما أعرف، ودعم لهم يقتصر على بكت / مقرها المتصفحات KHTML مثل سفاري، والكروم، كونكيورر وأومني ويب.

<ع> استخدام رمز المثال، سيعرض هذا تبدو مثل:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 3

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

وكما والآن أنا أدرك أنه ليس من الممكن وضعه في نفس الطبقة، ولكن من الممكن لوضع عدة صور في المنفصلة شعبة على رأس واحد آخر، وتم تنفيذه بواسطة شعبية اختبار قابلية الاستخدام موقع <لأ href = "http://silverbackapp.com/" يختلط = "noreferrer"> سيلفرباك (وتحقق الخلفية لنرى كيف تم الطبقات عليه). إذا كنت تبحث عن طريق شفرة المصدر يمكنك أن ترى أن يتم الخلفية تتكون من عدة صور، وضعت على رأس واحد آخر.

وهنا هو المقال يدل على كيفية القيام تأثير يمكن العثور على <لأ href = "http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax" يختلط = "noreferrer "> فيتامين . وثمة مفهوم مماثل لتغليف هذه الطبقات "البصل الجلد ويمكن الاطلاع على قائمة بصرف النظر .

Answer 4

وهذه الأيام يمكن القيام بذلك في جميع المتصفحات "الحديثة" (وليس

لبناء الجملة يمكنك الاختيار بين

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

و

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

وأنت لا تحتاج فواصل الأسطر، ولكن الفاصلة هو المهم.

---

والاهتمام! وفيما يلي خلق خلفيتين، حتى ولو كنت تحديد واحد فقط رابط الصورة:

  background-image:url(..);
  background-position:top, bottom;

---

وبطبيعة الحال، هناك بديل لاستخدام حاويات المتداخلة، ولكن هذا سوف تشعر بالانتفاخ أتش تي أم أل.

Answer 5

والطريقة الوحيدة هي استخدام وعاء آخر. قد يحتوي كل عنصر صورة خلفية واحدة فقط.

Answer 6

استخدم الموضع المطلق وض مؤشر للحصول على العنصر الثاني على القمة.

Answer 7

ربط النص

وفوق الرابط المذكور يصف أفضل ما ص تصل ...

Answer 8

لا تنسى يمكنك تطبيق الأنماط لعنصر HTML:

html {
background: url(images/whatever.gif);
}