امتیاز دهید:

یکی از قابلیت های بسیار کاربردی در سی اس اس امکان اختصاص بیش از یک تصویر برای background-image است. در واقع با استفاده از این قابلیت می توان چیزهای جذابی من جمله بنرهایی که از چندین عکس تشکیل شده اند طراحی نمود.
برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Netshahr</title>
   <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
   <p>Multiple Background Image</p>
</body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <body> یک تگ پاراگراف حاوی عبارت Multiple Background Image ایجاد کرده ایم. حال با استفاده از کدهای سی اس اس علاوه بر اختصاص اندازه و رنگ به این تگ، قصد داریم تا دو عکس هم روی آن قرار دهیم. برای این منظور، کدهای سی اس اس زیر را وارد ویرایشگر متن خود می کنیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png),url(../images/bird.jpg);
   background-repeat:no-repeat;
}

همانطور که در کد فوق می بینیم، برای background-image دو url در نظر گرفته ایم که بوسیله یک کاما از یکدیگر جدا شده اند. به خاطر داشته باشیم که url یی که اول نوشته شود به منزله تصویری خواهد بود که روی تصویر زیرین نمایش داده خواهد شد. همانطور که مشخص است url دوم هم مربوطه به عکسی است که زیر عکس بالایی قرار می گیرد. می بینیم که فایل اول فایلی با پسوند png است که مربوط به آیکان فیسبوک است و فایل دوم که در پس زمینه عکس قبل قرار خواهد گرفت یک عکس با پسوند jpg است تحت عنوان bird که مربوط به عکس یک طوطی می باشد. حال پس از ذخیره کردن هر دو فایل سی اس اس (CSS) و اچ تی ام ال (HTML) اقدام به اجرای صفحه در یک مرورگر می کنیم:

using multiple background /images in css

همانطور که در تصویر فوق می بینیم، عکس مربوط به طوطی در پس زمینه قرار گرفته و عکس مربوط به فیسبوک هم روی آن قرار گرفته است. حال فرض کنیم که با استفاده از دستور background-repeat قصد داریم تا عکس مربوط به فیسبوک را در جهت محور افقی تکرار کنیم. برای این منظور کدهای فوق را به صورت زیر بازنویسی می کنیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png),url(../images/bird.jpg);
   background-repeat:repeat-x,no-repeat;
}

همانطور که می بینیم برای background-repeat دو مقدار در نظر گرفته ایم که مقدار یا Value اول مربوط به تصویر اول یا همان لوگوی فیسبوک بوده و مقدار دوم هم برای تصویر مربوط به طوطی می باشد. حال مجدد مرورگر خود را به روز رسانی می کنیم:

2-using multiple background /images in css

همانطور که در تصویر فوق مشاهده می شود، لوگوی فیسبوک در جهت محور افقی تکرار شده است. همواره به خاطر داشته باشیم که اگر فقط یک Value برای Background-repeat در نظر بگیریم، این Value به هر دو عکس و یا هر تعداد عکسی که در نظر گرفته باشیم اختصاص می یابد.
علاوه بر این می توان از دستور background-position هم استفاده کرد به طوری که با تغییر کد فوق به صورت زیر می توان جایگاه تصاویر را نیز روی یکدیگر تنظیم نمود:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png), url(../images/bird.jpg);
   background-repeat: no-repeat;
   background-position: left center, 0 0;
}

همانطور که در کد فوق می بینیم به عنوان Value مرتبط با background-position ابتدا left center را در نظر گرفته که مربوط به تصویر لوگوی فیسبوک است سپس یک کاما قرار داده و این بار برای مشخص سازی جایگاه تصویر مربوط به طوطی از عدد استفاده می کنیم و از آنجا که می خواهیم این تصویر به صورت پیش فرض باشد اعداد 0 0 را در نظر می گیریم و از آنجا که در سی اس اس برای مقدار صفر نیازی به نوشتن px یا em و غیره نیست، کد را به بدون نوشتن px به اتمام می رسانیم.

3-using multiple background /images in css


نظرات
نظرات
  • قاسم قاسمی :

    ممنون دوست عزیز


    1393/11/09 19:52:34

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )