آموزش طراحی سایت-css background image

در این بخش از آموزش طراحی سایت به آموزش تعیین رنگ یا تصویر برای پس زمینه عناصر HTML می پردازیم.

در این بخش از آموزش طراحی سایت به آموزش تعیین رنگ یا تصویر برای پس زمینه عناصر HTML می پردازیم.

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

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

در این بخش ما با مشخصه های زیر آشنا خواهید شد:

  • background-color (رنگ پس زمینه)
  • background-image (تصویر پس زمینه)
  • background-repeat (تکرار تصویر پس زمینه)
  • background-attachment (حرکت کردن یا ثابت ماندن تصویر پس زمینه)
  • background-position (موقعیت تصویر پس زمینه)

CSS background-color (رنگ پس زمینه)

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

آموزش background image

خروجی مثال بالا به شکل زیر است:

آموزش background image

در زبان CSS، معمولا با استفاده از 3 روش زیر یک رنگ تعیین می شود:

  • استفاده از یک نام رنگ معتبر - مانند "Red"
  • استفاده از یک مقدار Hex - مانند "#ff0000"
  • استفاده از یک مقدار rgb - مانند "rgb(255,0,0)"

تعیین رنگ برای بقیه ی عناصر HTML

شما می توانید با استفاده از کدام از روش های بالا رنگ پس زمینه ی هر عنصر HTML را تعیین کنید. در مثال زیر رنگ پس زمینه تگ های h1، div و p تغییر کرده اند.

آموزش background image

خروجی مثال بالا به شکل زیر است:

آموزش background image

Opacity / Transparency (تعیین میزان شفافیت عناصر HTML)

مشخصه ی opacity میزان شفافیت یک عنصر HTML را تعیین می کند. این مشخصه می تواند یک مقدار بین 0.0 و 1.0 داشته باشد. هر چه مقدار این مشخصه کمتر باشد، شفافیت عنصر بیشتر است و عنصر به سمت محو شدن پیمایش می کند.

آموزش background image

برای انجام این کار باید از دستور opacity به شکل زیر استفاده کنید.

آموزش background image

شفافیت با استفاده از RGBA

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

آموزش طراحی سایت

CSS Background Image (تصویر پس زمینه)

مشخصه ی Background Image یک تصویر را به عنوان تصویر پس زمینه ی یک عنصر قرار می دهد. بصورت پیش اگر اندازه تصویر کوچکتر از اندازه عنصر موردنظر باشد، تصویر چندبار تکرار شده تا تمام فضای عنصر را پوشش دهد.

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

و به عنوان یک مثال دیگر:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

CSS Background Repeat (تکرار تصویر)

بصورت پیش فرض، مشخصه ی background-image هم بصورت عمودی و هم بصورت افقی تصویر را تکرار می کند. برای جلوگیری از این کار می توانید از مشخصه background-repeat استفاده کنید. زمانی که مقدار background-repeat را برابر با مقدار no-repeat قرار می دهید، تکرار تصویر صورت نمی گیرد و تنها یکبار تصویر در پس زمینه قرار می گیرد.

در مثال زیر از ویژگی background-repeat برای جلوگیری از تکرار تصویر استفاده شده است:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

خب همانطور که می بینید، تصویر پس زمینه دقیقا جایی قرار داده شده است که متن قرار داده شده است. بنابراین ما قصد داریم که موقعیت تصویر را تغییر دهیم تا متن قابل خواندن باشد.

background-position (موقعیت تصویر پس زمینه)

مشخصه background-position برای مشخص کردن موقعیت تصویر پس زمینه به کار می رود. مثال زیر نحوه انجام این کار را نشان می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است. همانطور که می بینید تصویر به سمت راست منتقل شده تا متن خوانایی بالاتری داشته باشد.

آموزش طراحی سایت

CSS Background Attachment (حرکت کردن یا ثابت ماندن تصویر پس زمینه)

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

با استفاده از مقدار fixed برای مشخصه background-attachment می توانید تصویر پس زمینه را هنگام اسکرول صفحه ثابت نگه دارید.

آموزش طراحی وب سایت

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

آموزش طراحی وب سایت

CSS Background Shorthand

به منظور کوتاه کردن کد، شما می توانید تمام مشخصه های پس زمینه را در یک مشخصه قرار دهید. این مشخصه shorthand نام دارد.

بنابرای شما می توانید به جای نوشتن دستورات زیر:

آموزش طراحی وب سایت

از shorthand property background به شکل زیر استفاده کنید:

آموزش طراحی وب سایت

هنگام استفاده از shorthand property ترتیب مقادیر مشخصه ها بصورت زیر می باشد:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

تا زمانی که بقیه ی مقادیر مشخصه background به ترتیب باشند، مهم نیست که یک مقدار مشخصه وجود نداشته باشد. به خاطر داشته باشید که ما از مشخصه ی background-attachment در مثال بالا استفاده نمی کنیم زیرا مقداری ندارد.

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش background image آموزش background position آموزش background attachment