سی ایس ایس رنگ کلمات

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

کلید transparent

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

مثال

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

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

آزمایش کنید

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

کلید currentcolor

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

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

مثال

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

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

آزمایش کنید

مثال

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

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;
}

آزمایش کنید