درس 29 از دوره آموزش HTML و CSS ارومیا دیزاین
برای یک بخش معرفی، تصویر پس زمینه گذاشته اید؛ اما تصویر تکرار می شود، بخشی از آن دیده نمی شود یا متن روی آن خوانا نیست. در این درس، تصویر پس زمینه در CSS را کنترل می کنیم: اندازه، موقعیت، تکرار و لایه بندی. با یک تصویر آزمایشی ثابت، علت تفاوت خروجی ها را می بینید و در پایان یک بخش معرفی با متن واقعی HTML می سازید.
فایل پروژه و پاسخ: دانلود پروژه درس 29 (ZIP)؛ شامل HTML، CSS، تصاویر محلی، پاسخ تمرین و راهنما. فایل را استخراج کنید و index.html را باز کنید. پروژه به اینترنت یا نصب کتابخانه نیاز ندارد.
در درس رنگ و پس زمینه با رنگ ها آشنا شدیم. این جلسه تنظیم دقیق تصویر را تمرین می کنیم. برای آماده کردن متن روی زمینه هم درس فونت و خوانایی متن را به خاطر داشته باشید.
تصویر محتوا یا تصویر تزئینی؟
اگر تصویر، محصول، نمودار یا اطلاعات ضروری را نشان می دهد، معمولاً باید در HTML قرار بگیرد و متن جایگزین مناسب داشته باشد. تصویر پس زمینه CSS متن جایگزین ندارد و صفحه خوان آن را مثل یک تصویر محتوایی معرفی نمی کند. از زمینه برای تزئین استفاده کنید و پیام اصلی را در متن واقعی صفحه بنویسید؛ نام محصول یا شماره تماس را فقط داخل تصویر قرار ندهید.
در پروژه این درس، تصویر رنگی و بافت نقطه ای تزئینی هستند. عنوان، توضیح و پیوند در HTML آمده اند؛ اگر تصویر بارگذاری نشود، اطلاعات ضروری باقی می ماند. تغییر پس زمینه نیز معنای عناصر HTML را عوض نمی کند.
background-image و مسیر درست فایل
برای تعیین تصویر از background-image و url() استفاده می کنیم. در فایل CSS خارجی، مسیر نسبی را نسبت به محل همان فایل CSS بنویسید، نه صفحه HTML. در پروژه، فایل استایل کنار index.html و پوشه تصاویر زیر آن است؛ بنابراین مسیر زیر درست است:
.hero {
background-color: #073047;
background-image: url("assets/hero.png");
}
اگر استایل را به پوشه css منتقل کنید و تصاویر در پوشه assets ریشه بمانند، مسیر باید ../assets/hero.png شود. نام فایل، حروف بزرگ و کوچک و پسوند را دقیق بررسی کنید. برای اتصال استایل، آموزش مقدماتی CSS را مرور کنید.
تصویر پس زمینه برای عنصر ارتفاع ایجاد نمی کند. عنصر خالی با ارتفاع صفر، زمینه قابل مشاهده ای هم ندارد. برای نمونه آزمایشی اندازه مشخص گذاشته ایم؛ در بخش معرفی، از محتوا، فاصله داخلی و حداقل ارتفاع کمک می گیریم تا متن بلند بریده نشود.
background-repeat؛ تکرار را کنترل کنید
رفتار اولیه تکرار تصویر است. بافت های کوچک می توانند با تکرار سطح را پر کنند، ولی تصویر یک بنر معمولاً نباید کاشی وار تکرار شود. مقدار no-repeat فقط یک نسخه را نمایش می دهد؛ repeat-x و repeat-y تکرار افقی و عمودی را تنظیم می کنند.
.hero {
background-repeat: no-repeat;
}
.pattern {
background-image: url("assets/tile.png");
background-repeat: repeat;
min-height: 150px;
}
در فایل دانلودی، بافت کوچک 48px در 48px است. تکرار آن برای ساخت الگو مناسب است. مقدار repeat را تغییر دهید و نتیجه را ببینید؛ برای آزمایش تکرار، تغییر تصویر لازم نیست.
background-size؛ تفاوت cover و contain
با cover تصویرِ دارای نسبت ذاتی، تناسب خود را حفظ می کند و ناحیه زمینه را می پوشاند؛ تفاوت نسبت تصویر و کادر می تواند باعث برش شود. با contain کل تصویر در ناحیه جا می گیرد، اما ممکن است بخشی از کادر خالی بماند. برای مقایسه روشن، در هر دو نمونه تکرار را خاموش کرده ایم.
.cover {
background-size: cover;
background-repeat: no-repeat;
}
.contain {
background-size: contain;
background-repeat: no-repeat;
}
تصویر پروژه 900 × 600 است؛ نسبت آن با کادر 540 × 270 فرق دارد. در cover تصویر به اندازه 540 × 360 نمایش داده می شود و با مرکزچین بودن، بخش های بالا و پایین بیرون کادر قرار می گیرند. در contain اندازه تصویر 405 × 270 است و کنار آن فضای خالی می ماند. این محاسبه برای کادر بدون کادر مرزی است؛ در پروژه، border کمی از ناحیه داخلی کم می کند.
نوشتن background-size: 100% 100% عرض و ارتفاع تصویر را مستقل تنظیم می کند؛ وقتی نسبت ها متفاوت باشند، تصویر کشیده می شود. برای حفظ تناسب، یک اندازه را همراه auto بدهید یا از cover و contain استفاده کنید. مفهوم واحدها را در درس واحدهای اندازه گیری مرور کنید.
.preview {
background-size: 100% auto;
}
background-position؛ بخش مهم تصویر را در کادر نگه دارید
موقعیت پیش فرض در سمت چپ و بالای ناحیه است. برای مرکز از center و برای سمت راست از right center استفاده کنید. راست به چپ بودن متن، خودبه خود تصویر را راست چین نمی کند. موقعیت و اندازه را با هم بررسی کنید، مخصوصاً وقتی cover بخشی از تصویر را بیرون کادر می برد.
.hero {
background-position: center;
}
.focus {
background-size: cover;
background-position: 80% center;
}
مقدار درصدی افقی، نقطه متناظر تصویر و ناحیه را هم تراز می کند؛ به معنای انتقال ساده تصویر به اندازه همان درصدِ عرض کادر نیست. اگر عرض تصویر و ناحیه دقیقاً یکسان باشد، تغییر درصد افقی اثری ندارد. به همین دلیل نمونه focus در پروژه کادر باریک تری دارد تا تغییر از 80% به 20% قابل مشاهده باشد.
رنگ جایگزین و لایه تیره برای متن خوانا
رنگ زمینه زیر تصویر قرار می گیرد و هنگام خطای بارگذاری یا وجود نواحی شفاف دیده می شود. برای متن سفید، یک رنگ جایگزین تیره بگذارید. لایه تیره هم کمک می کند متن روی بخش های روشن تصویر بهتر دیده شود، اما خوانایی نهایی را روی تمام بخش های تصویر بررسی کنید.
.hero {
background-color: #073047;
background-image:
linear-gradient(rgba(3, 20, 35, 0.88), rgba(3, 20, 35, 0.88)),
url("assets/hero.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
}
در فهرست چند زمینه، اولین تصویر بالاتر از بعدی قرار می گیرد؛ پس گرادیان نیمه شفاف روی تصویر قرار دارد. مقدارهای یکسان background-size، position و repeat در این نمونه به لایه ها اعمال می شوند. اگر بعداً کنترل جداگانه خواستید، برای لایه ها مقدارهای جدا با ویرگول بنویسید.
روی کل عنصر opacity نگذارید تا زمینه تیره شود؛ این کار متن و فرزندان را هم شفاف می کند. در این مثال، فقط لایه زمینه شفافیت دارد. رنگ و شفافیت گرادیان را تغییر دهید و خوانایی عنوان، متن و پیوند را با هم بسنجید.
میان نویسی background و خطای بازنشانی تنظیمات
می توانید تنظیمات را در ویژگی کوتاه background بنویسید. در این ساختار، اندازه پس از علامت اسلش و موقعیت قبل از آن قرار می گیرد. برای یادگیری، نوشتن ویژگی ها به صورت جدا معمولاً راحت تر است.
.hero {
background: #073047 url("assets/hero.png") center / cover no-repeat;
}
ویژگی کوتاه، تنظیمات زمینه ای را که ننوشته اید به مقدار اولیه برمی گرداند. اگر پس از تعیین background-image فقط background: #073047; بنویسید، تصویر حذف می شود. برای تغییر رنگ به تنهایی، background-color را تغییر دهید. هنگام اختلاف نتیجه، اولویت قوانین CSS و قانون فعال در ابزار توسعه را ببینید.
تمرین عملی: بخش معرفی با زمینه تزئینی
در پروژه آماده، سه نمونه cover، contain و تغییر موقعیت و یک نمونه بافت دارید. بخش .hero در ابتدا فقط رنگ تیره دارد. تمرین شما این است که تصویر و لایه تیره را به همین بخش اضافه کنید؛ عنوان و پیوند موجود در HTML باید خوانا بمانند. نمونه های مقایسه بالای صفحه را تغییر ندهید.
<section class="hero"> <h2>طراحی وب با محتوای خوانا</h2> <p>تصویر تزئینی است؛ پیام اصلی در HTML قرار دارد.</p> <a href="#contact">راه ارتباطی</a> </section>
فایل index.html ساختار را دارد؛ style.css استایل و نمونه ها را آماده می کند؛ تصاویر در assets قرار دارند. solution.css پاسخ است و از ابتدا متصل نیست. پس از تلاش خودتان، این خط را بعد از لینک استایل اصلی اضافه کنید:
<link rel="stylesheet" href="solution.css">
بخش معرفی از min-height: 280px و فاصله داخلی استفاده می کند، نه ارتفاع ثابت. با بیشتر کردن متن، بخش می تواند بلندتر شود. تفاوت فاصله داخلی و اندازه جعبه را با مدل جعبه CSS تطبیق دهید. پیوند نمونه inline-block است؛ این رفتار را در درس display یاد گرفتیم.
دانلود دوباره: پروژه و پاسخ تمرین درس 29. راهنمای آزمایش ها در README.txt است و تمام تصویرهای مورد نیاز داخل ZIP قرار دارند.
کنترل نتیجه و خطاهای رایج
- تصویر دیده نمی شود: مسیر نسبت به فایل CSS، نام فایل و ارتفاع عنصر را بررسی کنید.
- تصویر تکرار می شود: مقدار background-repeat و قانون فعال را ببینید.
- قسمتی از تصویر حذف شده: نسبت کادر را با تصویر و رفتار cover مقایسه کنید.
- تصویر کشیده شده: از تعیین مستقل عرض و ارتفاع بدون توجه به تناسب دوری کنید.
- متن محو یا کم رنگ است: opacity والد و شفافیت لایه ها را بررسی کنید.
- پس از تغییر رنگ تصویر حذف شده: ببینید background کوتاه، تنظیمات قبلی را بازنشانی کرده است یا خیر.
صفحه را در پنجره باریک هم ببینید؛ با تغییر نسبت کادر، نوع برش تصویر عوض می شود. سپس نشانی تصویر بخش معرفی را موقتاً نامعتبر کنید تا رنگ جایگزین را آزمایش کنید. متن و پیوند باید باقی بمانند. تغییر را برگردانید و با کلید Tab، نشانگر فوکوس پیوند را بررسی کنید.
خودآزمایی و درس بعد
چرا contain با وجود نمایش کامل تصویر، تمام کادر را پر نمی کند؟ چرا تصویر پس زمینه به عنصر خالی ارتفاع نمی دهد؟ مسیر تصویر در CSS خارجی نسبت به کدام فایل است؟ اگر پاسخ این پرسش ها را با پروژه توضیح می دهید، آماده مرحله بعد هستید.
در درس 30، کادر، گوشه های گرد و سایه در CSS را تمرین می کنیم تا کارت ها و بخش های معرفی ظاهر منظم تری بگیرند. برای مطالعه بیشتر می توانید تعریف background-size و background-image را در مرجع MDN ببینید.
بدون دیدگاه