محو CSS

پس‌زمینه تدریجی

میدان محیطی CSS به شما امکان می‌دهد که یک过渡 صاف بین دو یا چند رنگ مشخص شده را نمایش دهید.

CSS دو نوع میدان محیطی را تعریف می‌کند:

  • میدان خطی( به پایین/به بالا/به چپ/به راست/مستقیم)
  • میدان محیطی( بر اساس مرکز تعریف شده)

میدان خطی CSS

برای ایجاد یک میدان خطی، شما باید حداقل دو مارک رنگی تعریف کنید. مارک‌های رنگی رنگ‌هایی هستند که شما می‌خواهید یک过渡 صاف را نمایش دهید. شما همچنین می‌توانید نقطه شروع و مسیر (یا زاویه) و اثر میدان خطی را تنظیم کنید.

نحوه نوشتن

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

میدان خطی خطی - از بالا به پایین (پیش‌فرض)

مثال زیر نشان‌دهنده یک میدان خطی از بالا به پایین است. آن از قرمز شروع می‌کند و به زرد过渡 می‌کند:

از بالا به پایین (پیش‌فرض)

مثال

#grad {
  background-image: linear-gradient(red, yellow);
}

آزمایش کنید

تدریجی خطی - از چپ به راست

در مثال زیر تدریجی خطی از چپ شروع می‌شود. از قرمز شروع می‌کند و به زرد تغییر می‌کند:

از چپ به راست

مثال

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

آزمایش کنید

تدریجی خطی - مورب

شما می‌توانید با مشخص کردن موقعیت‌های افقی و عمودی شروع، تدریجی مورب را ایجاد کنید.

در مثال زیر تدریجی خطی از بالا چپ شروع می‌شود (به پایین راست می‌رسد). از قرمز شروع می‌کند و به زرد تغییر می‌کند:

از بالا چپ به پایین راست

مثال

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

آزمایش کنید

استفاده از زاویه

اگر می‌خواهید کنترل بیشتری بر زاویه تدریجی داشته باشید، می‌توانید یک زاویه تعریف کنید تا جایگزین مسیرهای پیش‌تعریف شده (پایین، بالا، راست، چپ، پایین و راست و غیره) شود. مقدار 0deg برابر با بالا (to top) است. مقدار 90deg برابر با راست (to right) است. مقدار 180deg برابر با پایین (to bottom) است.

180deg

نحوه نوشتن

background-image: linear-gradient(angle, color-stop1, color-stop2);

این زاویه زاویه خط水平 و خط تدریجی را مشخص می‌کند.

در مثال زیر نحوه استفاده از زاویه در تدریجی خطی نشان داده شده است:

مثال

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

آزمایش کنید

استفاده از چندین مارکر رنگی

در مثال زیر تدریجی خطی با چندین مارکر رنگی (از بالا به پایین) نشان داده شده است:

مثال

#grad {
  background-image: linear-gradient(red, yellow, green);
}

آزمایش کنید

در مثال زیر نحوه استفاده از رنگ‌های رنگین‌کمانی و یک مقدار متن برای ایجاد تدریجی خطی (از چپ به راست) نشان داده شده است:

پس‌زمینه تدریجی

مثال

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

آزمایش کنید

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

در CSS نیز به تدریج تغییر شفافیت پشتیبانی می‌شود و می‌توان از آن برای ایجاد اثر تدریجی استفاده کرد.

برای افزودن شفافیت، ما از تابع rgba() استفاده می‌کنیم تا رنگ‌های مارکر را تعریف کنیم. آخرین پارامتر تابع rgba() می‌تواند مقدار بین 0 تا 1 باشد که شفافیت رنگ را تعریف می‌کند: 0 به معنای شفافیت کامل است، 1 به معنای رنگ کامل (بدون شفافیت) است.

مثال زیر یک خطوط خطی از چپ به راست را نشان می‌دهد. این خطوط از حالت کامل شفاف شروع می‌شوند و به رنگ قرمز کامل تغییر می‌کنند:

مثال

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

آزمایش کنید

خطوط خطی تکراری

repeating-linear-gradient() توابع برای خطوط خطی تکراری:

مثال

خطوط خطی تکراری:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

آزمایش کنید