درس 29 ارومیا دیزاین: تصویر پس زمینه در CSS
1. ZIP را استخراج کنید و index.html را باز کنید؛ پروژه بدون اینترنت اجرا می شود.
2. پوشه assets شامل تصویر آزمایشی hero.png و بافت tile.png است.
3. نسبت تصویر اصلی 900 در 600 است. کادر معمولی به اندازه 540 در 270 محدود می شود.
4. تفاوت cover و contain را با نوارهای بالا و پایین و دایره مرکزی مقایسه کنید.
5. پنجره را باریک کنید؛ نوع برش در cover با تغییر نسبت کادر عوض می شود.
6. background-position در .focus را از 80% به 20% تغییر دهید و جای ناحیه طلایی را ببینید.
7. .pattern را با repeat، no-repeat و repeat-x آزمایش کنید.
8. تمرین: برای .hero تصویر زمینه، یک گرادیان تیره روی آن، cover، مرکزچین و no-repeat اضافه کنید؛ متن و پیوند باید خوانا بمانند.
9. پاسخ از ابتدا فعال نیست. برای مشاهده، این خط را بعد از لینک style.css در head بگذارید:
<link rel="stylesheet" href="solution.css">
10. برای آزمایش رنگ جایگزین، فقط نشانی تصویر در .hero را به فایل ناموجود تغییر دهید؛ سپس برگردانید.
11. نشانی url در CSS نسبت به محل فایل CSS است. اینجا style.css و solution.css در ریشه پروژه قرار دارند.
12. اعداد تمام فایل های HTML و CSS انگلیسی هستند. تصاویر فقط تزئینی هستند و پیام اصلی در HTML آمده است.
