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

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 */
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.