سی ای ایس پس منظر تکرار

CSS پس‌زمینه‌ی تکرار

به صورت پیش‌فرض،پس‌زمینه‌ی تصویر ویژگی‌ها تصاویر را در جهت افقی و عمودی تکرار می‌کنند.

برخی از تصاویر فقط باید در جهت افقی یا عمودی تکرار شوند، در غیر این صورت به نظر غیرعادی خواهند رسید، مانند این:

مثال

body {
  پس‌زمینه‌ی تصویر: url("gradient_bg.png");
}

آپ خود سنجائیجئے

اگر تصویر بالا تنها در جهت افقی تکرار شود (پس‌زمینه‌ی تکرار: تکرار افقی;)، پس‌زمینه بهتر به نظر می‌رسد:

مثال

body {
  پس‌زمینه‌ی تصویر: url("gradient_bg.png");
  پس‌زمینه‌ی تکرار: تکرار افقی;
}

آپ خود سنجائیجئے

توضیح:برای تکرار تصویر عمودی، لطفاً تنظیم کنید پس‌زمینه‌ی تکرار: تکرار عمودی;。

CSS پس‌زمینه‌ی تکرار: بدون تکرار

background-repeat پس منظر تصویر کو صرف ایک بار نمائش کرنے کا معین کرنے والی نمائش

مثال

پس منظر تصویر صرف ایک بار نمائش کی جائے:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

آپ خود سنجائیجئے

اس مثال میں، پس منظر تصویر اور متن ایک ہی مقام پر رکھی گئی ہیں۔ ہم چاہتے ہیں کہ تصویر کا مقام بدل جائے تاکہ تصویر کا زیادہ ترتنعت متن میں نہ ہو۔

CSS پس منظر نمائش

background-position پس منظر کی تصویر کی نمائش کا مقام کا معین کرنے والی نمائش

مثال

پس منظر کی تصویر کو یورگ پر لگائیں:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

آپ خود سنجائیجئے