9
تشکر

داشتن چندین بکگراند در CSS3

داشتن چندین بکگراند در CSS3

داشتن چندین بکگراند در CSS3

چگونه کار میکند؟

در گذشته ما برای داشتن چندین بکگراند باید حتما چنیدن دایو را تعریف و به هرکدام بکگراند خودش را بدهیم. چیزی مانند این:

.overcast1 {
    background-image: url("images/overcast.png");
    background-position: 150px 25px;
}
.rainbow {
    background-image: url("images/rainbow.png");
    background-position: 200px 10px;
}
.overcast2 {
    background-image: url("images/overcast.png");
    background-position: 250px 25px;
}
.sunny {
    background-image: url("images/sunny.png");
    background-position: 100px 10px;
}

کد بالا واقعا بدردنخور است. در CSS3 میتوان با مشخصه background-image چندین بکگراند داشت. به این صورت:

.weather {
    width: 500px;
    height: 280px;
    margin: 50px auto;
    background-image: url("images/overcast.png"),
                      url("images/rainbow.png"),
                      url("images/overcast.png"),
                      url("images/sunny.png");
    background-position: 150px 25px,
                         200px 10px,
                         250px 25px,
                         100px 10px;
    background-repeat: no-repeat;
}

داشتن چندین بکگراند در CSS3

داشتن چندین بکگراند در CSS3


در این کد ما چهار بکگراند آن هم با مکان های(Position) مختلف تعریف کردیم.

 


اضافه کردن انیمیشن به بکگراندها:

علاوه بر این ما میتوانیم به هر کدام از بکگراندها انیمیشن خاص خودش را بدیم. با استفاده از CSS3 Animation

به این صورت:

@keyframes weather {
    0% {
        background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
    }
    100% {
        background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
    }
}
.weather {
    animation: weather 5s;
}

مشاهده دمو: دمو

  • الهه سادات می‌گه:

    سلام. من میخوام برای بک گراند وب سایتم تو asp عکس بذارم ولی هرکاری میکنم نمیشه. یعنی این کد background-image: url(“آدرس عکسم.jpg”)
    تو تگ body میذارم ولی اصلا عکسی نمیاره.میشه کمکم کنید؟؟

    • محسن شفیعی می‌گه:

      بستگی داره. شاید شما عناصر داخل Body رو طوری قرار دادید که باعث شده ارتفاع body صفر بشه. باید این رو با Inspect Element چک کنید.
      و یا اینکه شما قبلا یک عنصر رو برابر body گرفتید و به اون بکگراند دادید.
      یا اینکه کلا عکس مشکل داره حالا در آدرس یا هر چیز دیگه


  • نظرات این مطلب بسته است.