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

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

آموزش کلمات کلیدی رنگی CSS

این صفحه را به توضیح transparent، currentcolorو inheritکلمات کلیدی. کلید واژه شفاف از transparentکلمه کلیدی برای شفاف سازی رنگ استفاده می شود. این اغلب برای ایجاد یک رنگ زمینه شفاف برای یک عنصر استفاده می شود. مثال در اینجا ، رنگ پس زمینه عنصر…

محمد یوسفی

13 جولای 2021

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


کلید واژه شفاف

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

مثال

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

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

div {
  background-color: transparent;
}

توجه:transparent کلمه کلیدی معادل RGBA (0،0،0،0) است. مقادیر رنگ RGBA یک پسوند مقادیر رنگ RGB با یک کانال آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.


کلمه کلیدی currentcolor

currentcolorکلمه کلیدی است که مانند یک متغیر است که ارزش فعلی از اموال رنگ یک عنصر نگه می دارد.

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

مثال

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

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

مثال

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

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

مثال

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

body {
 color: green;
}

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

کلمه کلیدی ارثی

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

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

مثال

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

div {
  border: 2px solid red;
}

span {
  border: inherit;
}

منبع

مطالب مرتبط

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