پس‌زمینه‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

از ویژگی‌های پس‌زمینه (به انگلیسی: background) در CSS برای تعریف حالت های (به انگلیسی: Effects) پس زمینه، برای عناصر استفاده می‌شود.

ویژگی‌های پس‌زمینه در CSS:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

ویژگی background-color در CSS

ویژگی background-color، رنگ پس زمینه یک عنصر را مشخص می‌کند.

مثال

رنگ پس زمینه یک صفحه به صورت زیر تنظیم می‌شود:

body {
  background-color: lightblue;
}

مشاهدهٔ نتیجه

در CSS، رنگ معمولاً از طریق روش‌های زیر مشخص می‌شود:

• یک نام رنگ معتبر - مانند «قرمز»

• یک مقدار HEX - مانند "#ff0000"

• یک مقدار rgb – مانند "rgb(255,0,0) "

برای مشاهده لیست کاملی از رنگ‌های ممکن به مقدارهای رنگ CSS مراجعه کنید.

سایر عناصر

می‌توانید رنگ پس زمینه را برای هر نوع عصر HTML تنظیم کنید:

مثال

در اینجا، عناصر <p> ,<h1> و <div> رنگ‌های پس زمینه متفاوتی خواهند داشت:

 1 h1 {
 2   background-color: green;
 3 }
 4 
 5 div {
 6   background-color: lightblue;
 7 }
 8 
 9 p {
10   background-color: yellow;
11 }

مشاهدهٔ نتیجه

کدری / شفافیت

ویژگی opacity میزان کدری/شفافیت یک عنصر را مشخص می‌کند. این ویژگی مقداری از ۰٫۰ تا ۱٫۰ را دریافت می‌کند. کمترین مقدار، بیشترین میزان روشنایی را دارد.

مثال

1 div {
2   opacity: 0.3;
3 }

مشاهدهٔ نتیجه

نکته: زمانی که از ویژگی opacity برای اضافه‌کردن شفافیت به پس زمینه یک عنصر استفاده می‌کنید، تمام عناصر فرزندش میزان یکسانی از شفافیت را به ارث می‌برند. این امر موجب می‌شود که متن درون یک عنصر کاملاً شفاف به سختی خوانده شود.

شفافیت با RGBA

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

در بخش رنگ‌های CSS ما آموختید، که می‌توان از مقادیر RGB به عنوان مقدار رنگ استفاده کرد. به علاوه RGB، می‌توان از یک مقدار RGB با کانال آلفا (RGBA) - که میزان کدری را برای یک رنگ مشخص می‌کند، استفاده کرد.

مقدار رنگ RGBA به صورت:

rgba(آلفا، آبی، سبز، قرمز)

مشخص می‌شود. پارامتر alpha یک عدد بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام کدر) است.

نکته: در مورد مقادیر رنگ RGBA در بخش رنگ‌های CSS ما مطالب بیشتری را خواهید آموخت.

مثال

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل