از تابع ()repeating-linear-gradient برای ساخت گرادینت (<gradient>) از نوع خطی تکرار شونده استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو و به همان صورت در پس زمینه تکرار می شوند.
این تابع دقیقا همان مقادیر تابع گرادینت خطی را می گیرد پس اگر با گرادینت خطی آشنا نیستید لطفا اول به ()linear-gradient مراجعه کنید.
تنها تفاوت این نوع از گرادینت با گرادینت خطی در این است که گرادینت خطی در سراسر یک عنصر پخش می شود اما گرادینت خطی تکرار شونده با توجه به مکان color-stop اول و آخرش, اندازه اش تعیین می شود و همان گرادینت را در سراسر عنصر در کنار هم تکرار می کند.
مقادیر گرادینت زیر را در نظر بگیرید:
background-image: repeating-linear-gradient(to right, yellow 10px, #009966, purple 50px);
نتیجه در تصویر زیر نمایش داده شده است:
اولین تکرار این گرادینت در فاصله 10 پیکسلی از دیواره سمت چپ عنصر شروع می شود و تا 40 پیکسل جلو می رود. چرا 40 پیسکل؟
چون تفاوت اولین و آخرین color-stop در این گرادینت برابر با (10 – 50) یعنی 40 می باشد, پس هر تکه از گرادینت برابر 40 پیکسل است. و هر سه رنگ زرد و سبز و بنفش در این محدوده 40 پیکسلی در کنار هم در راستای خط گرادینت در هم محو می شوند و دوباره همان تکه تکرار می شود تا تمام سطح عنصر پوشانده شود.
اگر همین مقادیر را برای گرادینت خطی استفاده کنیم نتیجه بصورت زیر خواهد بود:
background-image: linear-gradient(to right, yellow 10px, #009966, purple 50px);
این اتفاق به این دلیل افتاد که در گرادینت خطی, اولین رنگ تا اول عنصر و آخرین رنگ تا آخر عنصر پخش می شوند. اما در گرادینت خطی تکرار شونده چنین رفتاری دیده نمی شود چون color-stop اول و آخر, مرزهای هر تکه بشمار می آیند.
نکته دیگری که باید در مورد گرادینت خطی تکرار شونده بدانید این است که اگر برای رنگ های این نوع از گرادینت مکان (همان عدد بعد از رنگ) تعیین نکنید دقیقا شبیه به گرادینت خطی عمل می کند و با یک تکرار تمام سطح عنصر را پوشش می دهد:
background-image: repeating-linear-gradient(to right, yellow, #009966, purple);
همانطور که در گرادینت خطی می توانیم رنگ ها را با لبه های تند در کنار هم قرار دهیم در این نوع گرادینت هم می توانیم:
repeating-linear-gradient(to right, yellow 10px, yellow 23.4px, #009966 23.4px, #009966 36.8px, purple 36.8px, purple 50px);
لطفا دموی زیر را برای درک بهتر بررسی کنید:
See the Pen repeating-linear-gradient by Mojtaba Seyedi (@seyedi) on CodePen.
سلام
چرا کد آخر از to top که مینیوسم تکرار میشه؟
سلام. مطمئن نیستم کامل فهمیده باشم سوالتون رو
مقادیر to top و to right و غیره جهت گرادینت رو تعیین می کنند و به تکرار شدن و یا نشدن مربوط نیستند و تاثیری ندارند.
و در کل این گرادینت کارش تکرار شدنه. اگر گرادینت خطی رو هنوز نخوندین بی زحمت چک کنید:
http://css-tricks.ir/css_re…
اگر موردی بود حتما بپرسید.
میخوام بک گراند رو
1- از حالت linear به حالت angle تغییر بدم ، یعنی رنگها به ترتیب دور هم بچرخن ؛
2- به جای استفاده از حالت repeat میخوام حالت stretch باشه ، یعنی سایز صفحه طول و عرض هرچی بود ، خودشو همخوانی بده ؛
3- برای اینکه این حالت ایجاد شده رو مرورگر IE نسخه های پایین هم پشتیبانی کنه ، میتونیم علاوه بر این ، یه بک گراند تصویری برای این مرورگر بزاریم ؟ که خودش تشخیص بده اگه مرورگر IE بود ، اونو اجرا کنه در سایر مرورگرها هم که پشتیبانی میشه
باید چیکار کنم ؟
آیا اصلا این حالت های 1 و 2 که گفتم رو مرورگر پشتیبانی می کنه ؟
توی CSS چیزی به اسم angle نداریم اینجا اسمش conical هستش که البته هیچ مرورگری هم تاجایی که اطلاع دارم پیاده سازیش نکرده هنوز. پس امکان استفاده ازش نیست فعلا. اما یک پلیفیل واسش هست که اینجا می تونید ببینیدش:
https://leaverou.github.io/…
در مورد اون قضیه پشتیبانی ie هم این مطلب رو بخونید:
http://css-tricks.ir/?p=1600
سلام
آخرین مثال در کد های CSS رنگ purple وجود ندارد ولی در فایل اجرا شده در مرورگر رنگ بنفش وجود دارد فکر کنم در کد CSS مربوطه جا افتاده
ببخشید اشتباه شد