Veb-sahifada fon moybo'yoqli yaratish bo'yicha maslahatlar

Texnikani CSS yordamida bajaring

Agar veb-saytni yaratmoqchi bo'lsangiz, veb-sahifada mustahkam fon tasvirini yoki moybo'yoqli rasmni qanday yaratishni o'rganish qiziqtirishi mumkin. Bu juda ko'p vaqtdan beri mashhur onlayn rejimdir. Ushbu veb-dizayndagi hiyla-nayrangga ega bo'lgan qulay effekt.

Agar bundan oldin buni qilmagan bo'lsangiz yoki undan oldin omadsiz harakat qilsangiz, jarayon qo'rqinchli ko'rinishi mumkin, ammo bu aslida juda qiyin emas. Ushbu qisqacha o'quv qo'llanmalari yordamida siz CSS-dan foydalanib, texnikani bir necha daqiqada o'zlashtirish uchun kerak bo'lgan ma'lumotlarni olasiz.

Ishni boshlash

Fon tasvirlari yoki filigranlar (chindan ham juda oddiy fon tasvirlari) bosilgan dizayndagi tarixga ega. Hujjatlar ko'pincha ularni nusxalar olishiga yo'l qo'ymaslik uchun ularga suv belgilarini kiritishgan. Bundan tashqari, ko'plab broshyura va broshyuralar chop etish uchun dizaynning bir qismi sifatida katta fon rasmlarini ishlatadi. Veb-dizayn dizayni uzoqdan qarz olingan uslublardan iborat bo'lib, ushbu fon rasmlari ushbu qarz olgan uslublardan biridir.

Ushbu yirik fon tasvirlari quyidagi uch CSS uslubi xususiyatidan foydalangan holda yaratilishi oson:

Fon-rasm

Moybo'yoqli sifatida ishlatiladigan tasvirni aniqlash uchun fon-tasvirni ishlatasiz. Ushbu uslub oddiygina "rasm" deb nomlanadigan katalogda mavjud bo'lgan rasmni yuklash uchun fayl yo'lini ishlatadi.

background-image: url (/images/page-background.jpg);

Tasvirning o'zi oddiy tasvirdan ko'ra engilroq yoki shaffofroq bo'lishi muhimdir. Bu yarim moybo'yoqli tasvir matn, grafik va veb-sahifaning boshqa asosiy elementlari ortida turgan "suvsimon" ko'rinishini yaratadi. Ushbu qadam holda, fon rasmingiz sizning sahifangizdagi ma'lumotlar bilan raqobatlashadi va o'qishni qiyinlashtiradi.

Adobe Photoshop kabi biron-bir tahrir qilish dasturida fon tasvirini o'zgartirishingiz mumkin.

Orqa fon-takrorlang

Orqa fonda takrorlanadigan xususiyat keyinchalik keladi. Rasmingiz katta moybo'yoqli stil grafigini bo'lishini istasangiz, bu xususiyatni faqat bitta marta ko'rsatish uchun ishlatasiz.

fon-takrorlash: no-repeat;

"No-repeat" xususiyati bo'lmasa, bu ko'rsatuv sahifada qayta-qayta takrorlanadi. Bu ko'plab zamonaviy veb-dizaynlarda istalmagan, shuning uchun ushbu uslub CSS-da muhim deb hisoblanishi kerak.

Fon-ilovasi

Arxiv-biriktirma ko'pgina veb-dizaynerlar unutgan xususiyatdir. "Fixed" xususiyatidan foydalanganda fon rasmingizni o'rnida ushlab turadi. Bu tasvirni sahifada qayd etilgan moybo'yoqliga aylantiradi.

Ushbu xususiyat uchun standart qiymat "scroll". Agar fon-biriktirma qiymati aniqlanmasa, fon sahifaning qolgan qismi bilan birga aylanadi.

fon-ilovasi: qattiq;

Fon-o'lchov

Orqa fon o'lchami - yangi CSS xususiyati. Bu siz ko'rayotgan viewport asosidagi fon hajmini belgilash imkonini beradi. Bu turli xil qurilmalarda turli o'lchamlarda aks etadigan javob beradigan veb-saytlar uchun juda foydali.

fon-o'lchovi: qopqoq;

Ushbu xususiyat uchun foydalanishingiz mumkin bo'lgan ikkita foydali qiymat:

CSS-ga o'z sahifangizga qo'shiladi

Yuqoridagi xususiyatlarni va ularning qadriyatlarini tushunganingizdan so'ng, ushbu uslublarni veb-saytingizga qo'shishingiz mumkin.

Agar bir sahifali saytni yaratayotgan bo'lsangiz, veb-saytingizning bosh sahifasiga quyidagilarni qo'shing. Agar siz ko'p sahifali sayt tuzadigan va tashqi varaqning kuchidan foydalanmoqchi bo'lsangiz, tashqi stil sahifasining CSS uslublariga qo'shing.