معرفی تگ پرکاربرد پس زمینه در css

سلام دوستان.

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

امیدواریم که بتونیم در یاد گیری کد نویسی شما عزیزان نقش داشته باشیم.

نام مقاله: معرفی تگ پرکاربرد پس زمینه در css

مقدمه

اصلا این تگ چی هست؟ کاربرد این تگ چیه؟در کجای استفاده میشه؟

برای اینکه به اجزامون توی css پس زمینه بدیم از تگ background استفاده میکنیم.

برای مثلا اگه بخوایم رنگ قرمز به بکگراند بدیم:

خب میبینید که تگ ساده ای هست که بسیار ضروری و لازم هست توی کد نویسی.

اما این تگ میتونه خواص زیادی داشته باشه که برخی از اونها اشاره میکنیم.

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

ما توی کد نویسی چندین نوع رنگ داریم ، مثلا RGB , HEX , RGBA و …

رنگ های پرکاربرد رو اینجا براتون معرفی میکنم:

  • نوع HEX (نمونه #e74c3c )
  • نوع RGB (نمونه rgb(231, 76, 60) )
  • نوع عادی (نمونه black , red , yellow… )

(در برنامه فتوشاپ اکثرا از نوع HEX بدون # استفاده میشود)

به این نکته توجه کنید که هر رنگ hex مقادیر RGB و RGBA دارد.

درواقع این انواع رنگ رابطه محکمی با یکدیگر دارند.

نحوه قرار دادن انواع رنگ ها در پس زمینه

رنگ HEX:

(در کد نویسی نمیتوان از نوع HEX بدون# استفاده نمود ، در این صورت بکگراند رنگ مورد نظر مارا نمایش نمیدهد)

رنگ RGB و RGBA:

و رنگ های عادی:

(رنگ های عادی ، دارای محدودیت هستند ، لیست این رنگ هارا در اینجا مشاهده کنید)

 

قرار دادن تصویر بجای رنگ در پس زمینه

خب میرسیم به قسمت خوب آموزش.

حتما ببینید:   معرفی و آموزش transition در css

ما میتونیم داخل اجزای CSS خودمون عکس هایی رو به عنوان پس زمینه قرار بدیم.

اینکار با تابع زیبای URL قابل انجام هست.

کافیه توی قسمت your URL آدرس تصویر رو به صورتی که آخر آدرس فرمت عکس باشه بنویسیم.

برای مثال apci.ir/myphoto.png یا .jpg و یا هر فرمت قابل قبول دیگر.

تکرار عکس در بکگراند

خب برای مثال ما عکس کوچکی داریم که میخواهیم در پس زمینه تکرار شود.

و یا برعکس ، عکسی داریم که نمیخواهیم تکرار بشه!

برای اینکار از تابع repeat استفاده میکنیم.

به ۲ صورت:

این کد خلاصه هست ، اگر مبتدی هستید میتوانید از این کد استفاده کنید:

تکرار در جهت خاص

خب ، وقتی بخواهیم عکس ما توی یک جهت خاص تکرار شود چه؟

خب صفحه مانیتور ما ۲ بعدیه! پس فقط دو جهت X و Y رو دارا هستیم.

X جهت افقی و Y جهت عمودی هست.

برای مثال در کد زیر تصویر پس زمینه فقط در جهت عمودی (Y) تکرار خواهد شد:

کلیک برای نمایش نتجیه

-معرفی تگ پرکاربرد پس زمینه در css

خواص ضمیمه شدن بکگراند (attachment)

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

ما برای ضمیمه شدن عکس ۲ حالت داریم.

FIXED و حالت عادی.

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

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

حتما ببینید:   کد آماده نمایش ایمیل بصورت فلت

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

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

کلیک برای پیش نمایش زنده

-معرفی تگ پرکاربرد پس زمینه در css
نحوه نوشتن کد نوع ضمیمه شدن عکس

خب میتونیم از کد خلاصه استفاده کنیم:

و یا از تگ جدا برای اینکار استفاده کنیم:

مکان قرار گرفتن عکس:

ما میتونیم عکسمون رو در چند جهت top , center , bottom ,right , left قرار بدیم.

برای مثال اگر بنویسم top left ، تصویر در گوشه سمت چپ بالا  نمایش داده خواهد شد.

یک توضیح مقدماتی:

  • top = بالا
  • center = مرکز
  • bottom = پایین
  • left = چپ
  • right = راست

میتونیم این تگ هارو تکی و یا با هم استفاده کنیم.

نحوه نوشتن کد مکان قرارگرفتن عکس:

نوع خلاصه:

تگ جدا:

 

توجه: در این پیش نمایش تگ background-position را با مقادیری که بالا نوشتیم تغییر دهید تا عملا متوجه انواع موقعیت ها شوید.

کلیک برای پیش نمایش زنده

 

بخشی از تصویر رنگ ، و بخشی تصویر باشد!

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

حتما ببینید:   آموزش جامع تگ های important و z-index

چه رنگ هایی قابل قبول است؟

دقیقا همان رنگ هایی که در بالای مقاله توضیح دادیم!

نحوه نوشتن کد این خاصیت:

در ۳ نوع HEX , RGB , RGBA

 

دانستنی های مقاله معرفی تگ پرکاربرد پس زمینه در css

تفاوت انواع نوع رنگ

شاید پرسیده باشید که تفاوت انواع رنگ HEX RGB RGBA چیست؟

در نوع HEX فقط و فقط رنگ داریم! در نوع RGB نیز همینطور.

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

ما در نوع RGB فقط ۳ قسمت داخل پرانتز داریم ، مثدار رنگ قرمز R ، مقدار سبز G ، مقدار آبی B

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

آموزش مقدماتی

  • مقدار ۱٫۰ = رنگ خالص
  • مقادیر زیر ۱٫۰ = شفافیت کمتر (مثل ۰٫۵ یا ۰٫۷ و…)
  • مقدار ۰٫۰ = شفافیت بسیار کم (اصلا رنگی در کار نیست!)

نحوه نوشتن کد شفافیت رنگ با RGBA:

کافیست بجای ۱٫۰ از مقادیری که بالا نوشتیم استفاده کنید.

از معرفی تگ پرکاربرد پس زمینه در css لذت ببرید.

 

هر سوال در مورد این مقاله را ، در بخش نظرات بنویسید!

این مقاله نیز مثل مقالات قبل دائما بروز خواهد شد ، پس آنرا با دوستانتان به اشتراک بگذارید.

/ پایان مقاله معرفی تگ پرکاربرد پس زمینه در css

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

محمد آریامقصودی

اشتراک این مطلب در تلگرام.

1 Comment on معرفی تگ پرکاربرد پس زمینه در css

فیلم و سریال میگوید: :مهمان Report 12 ماه قبل

خوب بود ممنون.

    نظرتون چیه؟

    تنها نظرات با متن فارسی تایید خواهند شد.

    نام خود را بنویسید

    مثال: example@gmail.com

    مثال: www.apci.ir

    در اینجا پیام خود را بنوسید