پس‌زمینه‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از اموزش پس زمینه در CSS3)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 */
}



منابع آموزشی