واژه‌های کلیدی رنگ CSS

این فصل توضیح می‌دهد که transparentوcurrentcolor و inherit کلمه کلیدی.

کلمه کلیدی transparent

transparent این کلمه کلیدی برای ایجاد شفافیت رنگ استفاده می‌شود. این معمولاً برای تنظیم رنگ پس‌زمینه شفاف عناصر استفاده می‌شود.

مثال

در اینجا، رنگ پس‌زمینه <div> به طور کامل شفاف خواهد بود و تصویر پس‌زمینه نمایش داده خواهد شد:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

آزمایش کنید

توجه:transparent این کلمه کلیدی برابر است با rgba(0,0,0,0)RGBA رنگ‌های RGB هستند که بهRGB اضافه شده‌اند، با کانال آلفا - که شفافیت رنگ را مشخص می‌کند. اطلاعات بیشتری را در وب‌سایت ما ببینید، CSS RGB فصل و رنگ‌های CSS فصل.

کلمه کلیدی currentcolor

currentcolor این کلمه کلیدی مانند یک متغیر است، که مقدار فعلی رنگ property عناصر را ذخیره می‌کند.

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

مثال

در این مثال، رنگ لبه <div> به رنگ آبی خواهد بود، زیرا رنگ متن <div> آبی است:

div {
  color: blue;
  border: 10px solid currentcolor;
}

آزمایش کنید

مثال

در این مثال، رنگ پس‌زمینه <div> به رنگ رنگ فعلی عناصر body تنظیم شده است:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

آزمایش کنید

مثال

در این مثال، رنگ حاشیه و سایه <div> به رنگ فعلی عنصر body تنظیم شده است:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

آزمایش کنید

کلمه کلیدی inherit

inherit کلمه کلیدی تعیین می‌کند که ویژگی باید مقدار خود را از عنصر والد ارث‌برداری کند.

inherit کلمات کلیدی می‌توانند برای هر ویژگی CSS استفاده شوند و می‌توانند برای هر عنصر HTML استفاده شوند.

مثال

در این مثال، تنظیمات حاشیه <span> از عنصر والد ارث‌برداری می‌کند:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

آزمایش کنید