آموزش تنظیم چند پس زمینه در CSS3

4 سال پیش

امتیاز دهید post

آموزش تنظیم چند پس زمینه در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تنظیم چند پس زمینه در CSS3 خواهیم پرداخت.

ویژگی CSS چند پس زمینه برای افزودن یک یا چند تصویر در یک زمان بدون کد HTML استفاده می شود ، ما می توانیم تصاویر را طبق نیاز خود اضافه کنیم. یک نحو نمونه تصاویر چند پس زمینه به شرح زیر است:

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

#multibackground {

background-image: url(/css/images/logo.png), url(/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

}

مقادیر معمولاً استفاده شده در زیر نشان داده شده است:

background

برای تنظیم تمام خصوصیات تصویر پس زمینه در یک بخش استفاده می شود

background-clip

برای اعلام منطقه نقاشی پس زمینه استفاده می شود

background-image

برای مشخص کردن تصویر پس زمینه استفاده می شود

background-origin

برای تعیین موقعیت تصاویر پس زمینه استفاده می شود

background-size

برای تعیین اندازه تصاویر پس زمینه استفاده می شود

مثال

در زیر مثالی آورده شده است که تصاویر چند پس زمینه را نشان می دهد

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;div id = "multibackground"&gt;
         &lt;h1&gt;www.tutorialspoint.com&lt;/h1&gt;
         &lt;p&gt;
            Tutorials Point originated from the idea that there exists a class of 
            readers who respond better to online content and prefer to learn new 
            skills at their own pace from the comforts of their drawing rooms. 
            The journey commenced with a single tutorial on HTML in  2006 and elated 
            by the response it generated, we worked our way to adding fresh tutorials 
            to our repository which now proudly flaunts a wealth of tutorials and 
            allied articles on topics ranging from programming languages to web designing 
            to academics and much more..
         &lt;/p&gt;
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

#multibackground {

background-image: url(/css/images/logo.png), url(/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

}

</style>

</head>

<body>

<h1>www.tutorialspoint.com</h1>

<p>

Tutorials Point originated from the idea that there exists a class of

readers who respond better to online content and prefer to learn new

skills at their own pace from the comforts of their drawing rooms.

The journey commenced with a single tutorial on HTML in 2006 and elated

by the response it generated, we worked our way to adding fresh tutorials

to our repository which now proudly flaunts a wealth of tutorials and

allied articles on topics ranging from programming languages to web designing

to academics and much more..

</p>

</div>

</body>

</html>

خروجی

www.tutorialspoint.com
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more..

www.tutorialspoint.com

Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more..

اندازه چند پس زمینه

ویژگی چند پس زمینه برای افزودن اندازه های مختلف برای تصاویر مختلف پذیرفته شده است. یک نحو نمونه مانند زیر نشان داده شده است –

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

#multibackground {

background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;

background-size: 50px, 130px, auto;

}

همانطور که در بالا به عنوان مثال نشان داده شده است، هر تصویر دارای اندازه های خاصی به اندازه 50 پیکسل، 130 پیکسل و اندازه خودکار است.

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش تنظیم چند پس زمینه در CSS3

آموزش تنظیم چند پس زمینه در CSS3

مثال

اندازه چند پس زمینه

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش تنظیم چند پس زمینه در CSS3

مثال

اندازه چند پس زمینه

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه