آموزش Background در CSS

4 سال پیش

امتیاز دهید post

آموزش Background در CSS

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

این درس به شما می آموزد که چگونه پس زمینه عناصر مختلف HTML را تنظیم کنید. می توانید خصوصیات پس زمینه زیر را برای یک عنصر تنظیم کنید –

از ویژگی background-color برای تنظیم رنگ پس زمینه یک عنصر استفاده می شود.

از ویژگی background-image برای تنظیم تصویر پس زمینه یک عنصر استفاده می شود.

از ویژگی background-repeat برای کنترل تکرار تصویر در پس زمینه استفاده می شود.

از ویژگی background-position برای کنترل موقعیت تصویر در پس زمینه استفاده می شود.

از ویژگی background-attachment برای کنترل پیمایش تصویر در پس زمینه استفاده می شود.

از ویژگی background به عنوان مختصر برای تعیین تعدادی از خصوصیات پس زمینه استفاده می شود.

تنظیم رنگ Background در CSS

در زیر مثالی آورده شده است که نحوه تنظیم رنگ پس زمینه برای یک عنصر را نشان می دهد.

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p style = "background-color:yellow;"&gt;
         This text has a yellow background color.
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

This text has a yellow background color.

</p>

</body>

</html>

خروجی

This text has a yellow background color.

1	This text has a yellow background color.

تنظیم تصویر پس زمینه

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

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
   &lt;/body&gt;
&lt;html&gt;

Live Demo

<html>

<head>

<style>

body {

background-color: #cccccc;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

<html>

خروجی

!Hello World

تکرار تصویر پس زمینه

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

به طور پیش فرض ویژگی تکرار پس زمینه دارای مقدار تکرار خواهد بود.

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Tutorials point&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

body {

background-repeat: repeat;

}

</style>

</head>

<body>

<p>Tutorials point</p>

</body>

</html>

خروجی

Tutorials point

1	Tutorials point

مثال زیر نحوه تکرار عمودی تصویر پس زمینه را نشان می دهد.

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Tutorials point&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

<style>

body {

background-repeat: repeat-y;

}

</style>

</head>

<body>

<p>Tutorials point</p>

</body>

</html>

خروجی به صورت زیر می باشد

Tutorials point

1	Tutorials point

مثال زیر نحوه تکرار افقی تصویر پس زمینه را نشان می دهد

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Tutorials point&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

body {

background-repeat: repeat-x;

}

</style>

</head>

<body>

<p>Tutorials point</p>

</body>

</html>

مثال زیر نحوه تکرار افقی تصویر پس زمینه را نشان می دهد

Tutorials point

1	Tutorials point

تنظیم موقعیت تصویر پس زمینه

مثال زیر نحوه تنظیم موقعیت تصویر پس زمینه 100 پیکسل از سمت چپ را نشان می دهد.

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Tutorials point&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

<style>

body {

background-position:100px;

}

</style>

</head>

<body>

<p>Tutorials point</p>

</body>

</html>

خروجی به صورت زیر می باشد

Tutorials point

1	Tutorials point

مثال زیر نحوه تنظیم موقعیت تصویر پس زمینه 100 پیکسل از سمت چپ و 200 پیکسل پایین از بالا را نشان می دهد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Tutorials point&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<style>

body {

background-position:100px 200px;

}

</style>

</head>

<body>

<p>Tutorials point</p>

</body>

</html>

خروجی به صورت زیر می باشد

Tutorials point

1	Tutorials point

تنظیم پیوست پس زمینه

پیوست پس زمینه تعیین می کند که آیا یک تصویر پس زمینه ثابت است یا با بقیه صفحه پیمایش می کند.

مثال زیر نحوه تنظیم تصویر پس زمینه ثابت را نشان می دهد

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-attachment: fixed;

}

</style>

</head>

<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>

</html>

خروجی به صورت زیر می باشد

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.

If you do not see any scrollbars, try to resize the browser window.

مثال زیر نحوه تنظیم تصویر پس زمینه پیمایشی را نشان می دهد.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
      &lt;p&gt;The background-image is fixed. Try to scroll down the page.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-attachment: fixed;

background-attachment:scroll;

}

</style>

</head>

<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>

</html>

خروجی به صورت زیر می باشد

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

The background-image is fixed. Try to scroll down the page.

If you do not see any scrollbars, try to resize the browser window.

The background-image is fixed. Try to scroll down the page.

If you do not see any scrollbars, try to resize the browser window.

ویژگی های مختصر

می توانید از ویژگی پس زمینه برای تنظیم همزمان همه ویژگی های پس زمینه استفاده کنید. مثلا

&lt;p style = "background:url(/images/pattern1.gif) repeat fixed;"&gt;
   This parapgraph has fixed repeated background image.
&lt;/p&gt;

This parapgraph has fixed repeated background image.

</p>

منبع.

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

امتیاز دهید post

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

آموزش Background در CSS

آموزش Background در CSS

تنظیم رنگ Background در CSS

تنظیم تصویر پس زمینه

!Hello World

تکرار تصویر پس زمینه

تنظیم موقعیت تصویر پس زمینه

تنظیم پیوست پس زمینه

ویژگی های مختصر

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

دیدگاه شما

بدون دیدگاه

آموزش Background در CSS

تنظیم رنگ Background در CSS

تنظیم تصویر پس زمینه

!Hello World

تکرار تصویر پس زمینه

تنظیم موقعیت تصویر پس زمینه

تنظیم پیوست پس زمینه

ویژگی های مختصر

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

دیدگاه شما

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

بدون دیدگاه