در طراحی وب، کنترل نحوه تکرار تصاویر پس‌زمینه یکی از قابلیت‌های مهم CSS است. دو مقدار کمتر شناخته‌شده برای این ویژگی، space و round هستند که رفتارهای خاصی در تکرار تصاویر ایجاد می‌کنند. این مقادیر زمانی مفید هستند که بخواهیم تصویر پس‌زمینه را به شکلی یکپارچه و بدون برش در فضای موجود نمایش دهیم.
تفاوت‌های کلیدی بین space و round
هر دو مقدار space و round برای جلوگیری از برش تصویر طراحی شده‌اند، اما روش رسیدن به این هدف در آنها متفاوت است:
- space: تصویر را بدون تغییر اندازه تکرار می‌کند و فضای خالی بین تصاویر را به صورت مساوی توزیع می‌نماید.
- round: اندازه تصویر را تغییر می‌دهد تا بدون فضای خالی و به صورت کامل در فضای موجود جای بگیرد.
مثال‌های عملی
درک این مفاهیم با مثال‌های عملی ساده‌تر می‌شود. در ادامه سه نمونه کد برای نمایش این ویژگی‌ها ارائه شده است:
مثال ۱: استفاده از background-repeat: space
.box {
width: 400px;
height: 200px;
background-image: url('pattern.png');
background-repeat: space;
}مثال ۲: استفاده از background-repeat: round
.box {
width: 350px;
height: 180px;
background-image: url('tile.jpg');
background-repeat: round;
}مثال ۳: مقایسه space و round
.container {
display: flex;
}
.space-box {
background-repeat: space;
}
.round-box {
background-repeat: round;
}کاربردهای عملی
این ویژگی‌ها در طراحی‌های خاص بسیار کاربردی هستند:
- طراحی الگوهای تکراری بدون نگرانی از برش تصویر
- ایجاد پس‌زمینه‌های واکنش‌گرا که با تغییر اندازه عنصر تطبیق می‌یابند
- طراشی گالری‌های تصویری با چیدمان یکنواخت
خلاصه درس
- مقدار space فقط زمانی اثر دارد که فضای کافی برای حداقل دو تصویر وجود داشته باشد
- در round، تصویر ممکن است به میزان کمی کشیده یا فشرده شود تا فضای موجود را پر کند
- این ویژگی‌ها در تمام مرورگرهای مدرن پشتیبانی می‌شوند اما در نسخه‌های قدیمی ممکن است کار نکنند
- ترکیب این ویژگی با background-size می‌تواند نتایج جالب‌تری ایجاد کند
در نهایت، انتخاب بین space و round به نیاز طراحی شما بستگی دارد. اگر حفظ نسبت تصویر مهم است، round گزینه بهتری است. اما اگر می‌خواهید تصویر بدون تغییر اندازه تکرار شود، space انتخاب مناسب‌تری خواهد بود.
