CSS fon oshkoralik. CSS bilan oshkora fon yoki matn

CSS3 veb-dizaynerlar kelishi bilan ko'p jihatdan ish yanada qulay va mantiqiy aylangan: Axir, siz endi, albatta, moslashuvchan, kamroq tez-tez JavaScript murojaat, har qanday ob'ekt sozlashingiz mumkin. Siz fon oshkoraligini rostlash kerak aytaylik - CSS darhol bir necha variantlari taqdim etadi.

sifatlaridan bir majmui tomonidan belgilab Background (fon-image, fon-joy , fon-hajmi, fon-repeat, fon-ilova, fon-kelib chiqishi, fon-klip, fon-rang), alohida-alohida belgilangan, yoki xususiyati ostida birlashtirish mumkin har biri fon. AQSh batafsil ularning har biri ko'rib chiqamiz.

background-rangini vasf

CSS, fon rangi bir hex kodi, rang nomi yoki RGB-entry yordamida: bir necha yo'llar bilan o'rnatish mumkin. CSS3 yilda o'rniga RGBA bilan RGB-yozuv variantni foydalanish mumkin bo'ldi.

background-color:: # FFDAB9 hex rang kodi katak keyin mol-mulki qayd etiladi. Ushbu xotima belgilar bilan bir xil juft bo'lsa, kod, odatda, bir oz kesilgan bo'ladi: # ccff00 # cf0 sifatida yozilishi mumkin:

tana {background-color: # cf0 ;}.

nomi hatto eng ekzotik rangdagi, deb. Misol uchun, standart qizil va NavajoWhite (#FFDEAD) yoki Honeydew2 (# E0EEE0) foydalanishingiz mumkin oq tashqari:

tana {background-color: safsar; }.

Ikkinchi variant RGB yoki RGBA kirish siz rangini balki CSS fon oshkoraligini nafaqat belgilash imkonini beradi, lekin usuli faqat 9 dan katta IE versiyalarida ishlaydi. Boshqa brauzerlar shaffoflik bilan normal versiyasini tan. W3C standartlariga ko'ra, u hali ham o'rniga yana odatdagi RGB RGBA foydalanish afzallik beriladi.

RGBA fonda so'nggi qiymati va 1 (xira) 0 (shaffof) dan xiralik belgilab beradi.

ba'zi ajoyib qadriyatlar bor. fon rangi HSL va HSLA yordamida sozlash mumkin. Har ikki CSS3 qo'shilgan edi va shuning uchun IE versiya 9 yoki undan yuqori tomonidan qo'llab-quvvatlanadigan emas. Qoidalarning faqat bir xil shaklda xil RGB yoki RGBA: Hue (soya - daraja berilgan rang g'ildirak ustida qiymati), Doygunlaştır (to'ymoqlik - 0 dan 100 foiz sifatida rang intensivligi), Oshkoralik (hafiflik - yorqinlik, parametresine Xuddi shunday o'lchanadi ).

background-rasm vasf

shaffof fon eng ko'ndalang brauzer versiyasi - bu tasvir foydalanish hisoblanadi. CSS3, siz ham ko'proq tasvir o'rnatishingiz mumkin, bu bir vergul orqali amalga oshiriladi. misol:

{Background-tana image: url (bg1.png), url (bg2.png)}.

hatto IE8 qo'llab-quvvatlash, bu yo'l. tartibini ishlatiladigan plastik fonda bir necha tasvirlar. Muhimi, foydalanuvchilar shunchaki tasvirni yuklashingiz mumkin kabi, har qanday tasvirni foydalanish va CSS fon rangini belgilash uchun unutmang.

background-o'rnini vasf

Agar fon birligidan o'rnatish uchun rasm foydalanayotgan bo'lsangiz, CSS ekranda joyda tasvir joylashtirish imkonini beradi. Sukut bo'yicha image yuqori chap burchagida joylashgan. Xususiyati og'zaki ko'rsatmalar (yuqori, pastki, o'ng, chap), bir soni (foiz, piksel va boshqa birliklari) ham oladi. Bu holda, gorizontal va vertikal ikki qadriyatlarni, quyidagilar ko'rsatilishi kerak:

tana {background-position: o'ng markazi ;} - bu misol, namuna sahifaga, shu uchun tasvir masofa yuqori va pastki o'ng tomonida joylashgan bo'ladi.

background-o'lchamini vasf

Ba'zan CSS fon uzatmoqchi yoki uning hajmini kamaytirish zarur. Buning uchun, xususiyati fon-o'lchamini va piksel yoki foiz o'rnatishingiz mumkin fon hajmini, va har qanday boshqa birliklari foydalaning.

shu xususiyati tufayli, ayrim muammolar bor: brauzer prefikslar oldingi versiyalarida bir fon to'g'ri ko'rsatish foydalanish uchun. Albatta, hozirgi versiyasi to'liq ushbu xususiyatni qo'llab-quvvatlaydi va aniq xususiyatlari ehtiyoj yo'qoldi.

background-attachment vasf

Bu xususiyati bilan o'tish paytida fon rasmlari muomalasini belgilaydi. Bas, u (meros, bu maqolada muhokama sifatlari barcha uchun jami shu jumladan emas) 3 qiymatlarni qabul qilishi mumkin:

• belgilangan - Statsionar fonida rasm kiritadi;
• o'ting - elementlar qolganlari bilan fon o'rog'liq;
• mahalliy - o'tish mazmuniga ega bo'lsa fonida rasm siljitish. ramkaning mazmuniga orqasida ketadi Background belgilanadi.

Foydalanish Misol:

tana {background-attachment sobit}.

Ayni paytda, Firefox oxirgi mulkni (mahalliy) qo'llab-quvvatlamaydi.

background-kelib chiqishi vasf

Bu xususiyati joylashishni element uchun javobgar bo'ladi. Erta brauzerlar prefikslar foydalanishni talab qiladi. Mulk o'zi uch parametrlarni ega:

• hisobga ramkaning qalinligini olganda padding-box, dam naqsh nisbatan mavqega ega bo'lgan;
• chegara chizig'i bo'lishi mumkin oldingi farq chegara-box xususiyatlari to'liq yoki qisman naqsh ustiga o'raydigan;
• kontent-box joylashishni image uning mazmunini pryavyazyvaya.

Agar bir necha qiymatlarni tanlashingiz bo'lsa, keyin brauzerlarda o'z yo'lida munosabat mumkin: Firefox va Opera faqat birinchi variantni sezmagan.

background-takrorlash vasf

background image belgilangan bo'lsa, qoida tariqasida, u gorizontal yoki vertikal takror bo'lishi kerak. Buning uchun va xususiyati fon-takrorlash ishlatiladi. Shunday qilib, blok fon, bunday mol-mulkni o'z ichiga CSS bir necha parametrlar biri bo'lishi mumkin:

• no-repeat - tasvir bitta versiyada bir sahifada paydo bo'ladi;
• takror - fon x va y takrorlangan;
• takror-X - faqat gorizontal;
• takror-y - faqat vertikal;
• maydoni - fon takrorladi, lekin kosmik rasmlar o'rtasidagi to'ldirish mumkin emas, agar bo'sh paydo bo'ladi;
• dumaloq - bu butun rasmlar butun maydoni to'ldirish bo'lmasa, tasvir, ölçeklendirilir.

sifatlaridan Misol:

tana {background-repeat: erga nolga teng takrorlash} - shunga o'xshash fon-repeat: takror-y.

vergul bilan ajratilgan parametrlar, listing qachon CSS3 yilda bir necha tasvir uchun qiymatlarni tanlashingiz mumkin.

background-tasma vasf

Bu xususiyati (nuqtali ramkalar holda, masalan,) chegaralari ostida fon xatti-belgilaydi:

• padding-box - blokda ichki ko'rsatiladi fon;
• chegara-box - image doirasida keladi;
• kontent-box - fonida rasm faqat mazmuni doirasida paydo bo'ladi.

Foydalanish Misol:

tana {background-klip: kontent- box;}.

Chrom va Safari -webkit- prefiks talab qiladi.

Opaklık sifatlari va filtri

CSS mulk barcha brauzerlarda ishlaydi - qorong'i xususiyati fonda shaffofligini belgilash uchun imkon beradi. qiymati 0.0 dan inklyuziv 1,0 oralig'ida o'rnatiladi. Bu holda, siz CSS fon oshkoraligini o'rnatishingiz mumkin o'rniga 0,3 hech integer qiymati .3 yozish kifoya:

.block {background-image: url ( img.png); qorong'i: .3;}.

Orqa fon xiraligi o'rnatish uchun, CSS filtri xususiyatni foydalaning, hatto to'qqizinchi versiyasi quyida IE uchun javob beradi:

.block {background-image: url ( img.png); filtri: alfa (opacity = 30)}.

xiralik yordamida aniq emas faqat fon bo'lib, balki birlik ichida barcha elementlar qachon: Bu holda, qorong'i qiymati qorong'i RGBA meros orqali turli oshkoralik parametrlarini vasf deb 0 va 100 Izoh o'rtasida o'rnatiladi.

Har doim MDH brauzerlarda va boshqa barcha mamlakatlar uchun foydalanish e'lonlar kuzatib. Barcha nashrga tayyorlash eng katta muammo - IE katta versiyalari, ular to'liq darajada CSS3 foydalanish imkonini bermaydi. tartibi brauzer har qanday CSS mulkni qo'llab-quvvatlaydi yoki yo'qligini tekshirish maxsus xizmatlaridan foydalanish unutmang. Agar brauzerlar eski versiyasini o'rnatish mumkin emas bo'lsa, onlayn bir necha brauzerlar sayt ish nazorat qiluvchi bir xizmat topish.