توابع CSS linear-gradient()

تعریف و استفاده

CSS linear-gradient() توابعی برای ایجاد خط مستقیم خطی به عنوان پس‌زمینه استفاده می‌شوند.

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

مثال‌های خط مستقیم:

مثال‌ها

مثال 1

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

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

آزمایش کنید

مثال 2

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

مثال 4

یک خط مستقیم خطی که زاویه مشخص شده است:

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

آزمایش کنید

مثال 5

یک خط مستقیم شامل چندین نشان‌دهنده رنگ:

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

آزمایش کنید

مثال 6

یک گرادیان خطی با دو نقطه نمودار رنگ:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

آزمایش کنید

مثال 7

یک گرادیان خطی با شفافیت:

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

آزمایش کنید

نحوه نوشتن CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این تابع است.

صفحات مرتبط

آموزش:فنون CSS گرادیان

ارجاع:خصوصیت background-image CSS

ارجاع:فنون CSS conic-gradient()

ارجاع:فنون CSS radial-gradient()

ارجاع:فنون CSS repeating-conic-gradient()

ارجاع:فنون CSS repeating-linear-gradient()

ارجاع:توابع repeating-radial-gradient() CSS