٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش زمینه های CSS

از ویژگی های پس زمینه CSS برای افزودن جلوه های پس زمینه برای عناصر استفاده می شود. در این فصل ها ، با خصوصیات پس زمینه CSS زیر آشنا خواهید شد: رنگ پس زمینه CSS background-colorاموال رنگ پس زمینه یک…

محمد یوسفی

7 جولای 2021

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

در این فصل ها ، با خصوصیات پس زمینه CSS زیر آشنا خواهید شد:

رنگ پس زمینه CSS

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

مثال

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

body {
  background-color: lightblue;
}

با CSS ، یک رنگ اغلب توسط:

  • یک نام رنگی معتبر – مانند “قرمز”
  • یک مقدار HEX – مانند “# ff0000”
  • مقدار RGB – مانند “rgb (255،0،0)”

برای مشاهده لیست کاملی از مقادیر ممکن رنگ ، به مقادیر CSS Color نگاه کنید .


عناصر دیگر

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

مثال

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

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

کدورت / شفافیت

opacityاموال کدورت / شفاف از یک عنصر مشخص می کند. این می تواند یک مقدار از 0.0 – 1.0 را بگیرد. مقدار پایین تر ، شفاف تر:

مثال

div {
  background-color: green;
  opacity: 0.3;
}

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


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

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

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

مقدار رنگ RGBA با این موارد مشخص می شود: rgba (قرمز ، سبز ، آبی ، آلفا ). آلفا پارامتر عددی بین 0.0 (به طور کامل شفاف) و 1.0 (به طور کامل مات) است.

نکته: در مورد رنگهای RGBA در بخش رنگهای CSS بیشتر می آموزید .

مثال

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها