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

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

سؤال

هل من الممكن الحصول على صورتين خلفيتين؟على سبيل المثال، أرغب في تكرار صورة واحدة في الجزء العلوي (تكرار-x)، وتكرار آخر عبر الصفحة بأكملها (تكرار)، حيث تكون الصورة الموجودة في الصفحة بأكملها خلف الصورة التي تتكرر في الجزء العلوي.

لقد وجدت أنه يمكنني تحقيق التأثير المطلوب لصورتين خلفيتين عن طريق تعيين خلفية html والنص:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

هل هذا CSS "جيد"؟هل هناك طريقة أفضل؟وماذا لو أردت ثلاث صور خلفية أو أكثر؟

هل كانت مفيدة؟

المحلول

وCSS3 يسمح هذا النوع من الشيء ويبدو مثل هذا: 

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

الإصدارات الحالية من جميع المتصفحات الرئيسية تدعم الآن ، ولكن إذا كنت في حاجة ل دعم IE8 أو أقل، ثم أن أفضل طريقة يمكنك العمل حوله هو أن تكون عناصر div إضافية: 

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

نصائح أخرى

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

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

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

وعلى أمل أن يساعد! هناك وظيفة على بلدي بلوق التي تتحدث عن هذا أكثر من ذلك بقليل في عمق إذا كان أي شخص يحتاج إلى مزيد من الإرشادات أو مساعدة - <وأ href = "http://blog.thelibzter.com/css-tricks-use-two-background-images ، للحصول على واحد-شعبة "> http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .

استخدم هذا 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

وطريقة بسيطة لضبط لكم كل موقف صورة مع خلفية موقف: وتعيين الخاصية تكرار مع الخلفية تكرار: لكل صورة على حدة

وإصدار الحالي من FF وIE وبعض المتصفحات الأخرى دعم متعددة الصور الخلفية في إعلان CSS2 واحد. انظر هنا http://dense13.com/blog/ 2008/08/31 / متعددة خلفية صور عالية مع CSS2 / و هنا HTTP : //www.quirksmode.org/css/multiple_backgrounds.html و هنا <لأ href = "http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/" يختلط = "noreferrer "> http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

لIE، قد تنظر في إضافة السلوك. انظر هنا: http://css3pie.com/

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

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

إذا كنت تريد متعددة الصور الخلفية ولكن لا نريد منهم أن تتداخل، يمكنك استخدام هذه CSS: 

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

ومع هذا الهيكل HTML: 

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>


#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

يمكننا بسهولة إضافة صور متعددة باستخدام CSS3.يمكننا أن نقرأ بالتفصيل هنا http://www.w3schools.com/css/css3_backgrounds.asp

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top