Üslublar

background-attachment xassəsinin defolt dəyəri sürüşdürmədir, yəni fon element boyunca sürüşür. Dəyəri sabit olaraq təyin etsəniz, mövqe sabitlənəcəkdir.

Əsas, html, əsas ( /* mühüm */ hündürlük: 100%; ) .cd-fixed-bg ( min-hündürlük: 100%; fon ölçüsü: örtük; fon-qoşma: sabit; fon-təkrar: təkrarlama yoxdur fon-mövqe: mərkəz mərkəzi ) .cd-sabit-bg.cd-bg-1 ( fon-şəkil: url("../img/cd-background-1.jpg"); ) .cd-sabit- bg.cd-bg-2 ( fon şəkli: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 (fon şəkli: url( "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 ( fon şəkli: url("../img/cd-background-4.jpg" ); .cd-scrolling-bg ( min hündürlük: 100%; )

Cədvəlin altında mətn və digər faydalı məlumatlara sahib olacağımız stasionar fon şəklini quraşdırarkən aşağıdakı effekt yaranır: mətni olan cədvəli sürüşdürərkən onun altındakı fon sabit qalır və cədvəllə birlikdə hərəkət etmir. Burada olduğu kimi:

Bu effekt, səhifələrinizdə bəzi ikiqatlı illüziya, bir az boşluq yarada bilər.
Tipik olaraq, hərəkətsiz şəkil fonunun effekti CSS stil cədvəlinə aşağıdakı atributların təyin edilməsi ilə əldə edilir: fon-qoşma: sabit; Söhbət .css uzantılı ayrıca sənəddə olan CSS üslub cədvəlindən gedir

Bizə lazım olanı quraşdırmağın bir neçə yolu var.

1-ci üsul.

Fonumuz olacaq bir şəkil seçirik. Bu halda, mən bu şəkli çəkirəm (tam ölçüsünü görmək üçün kiçik şəklin üzərinə klikləyin):

BODY üçün parametrləri təyin etdiyimiz css stil sənədində aşağıdakı konstruksiyanı daxil edin:

BODY(fon şəkli: url(fon şəklinin ünvanı); fon-qoşma: sabit; fon-təkrar: təkrar olunmur; fon mövqeyi: yuxarı;)

Bu halda, biz fon şəkli kimi böyük tam ekran şəkli alırıq (məsələn, 1280x1024 piksel).

Qeyd: Əgər css üslubunda sənədiniz yoxdursa, onda göstərildiyi kimi birini yaratmalısınız - və eyni dərsdə göstərildiyi kimi html səhifənizin koduna css üslublu sənədə keçid əlavə etməlisiniz.

Beləliklə, üslublardan istifadə edərək təyin etdiyimiz parametrlər bunlardır:

Fon şəkli: url(fon şəklinin ünvanı); - fon şəklimizin ünvanını daxil edin 1280x1024 px.

Fon-qoşma: sabit; - arxa plana sabit, yəni hərəkətsiz qalmaq göstərişi veririk.

Fon-təkrar: təkrarlanmamaq; - arxa plana çoxalmamaq göstərişi veririk.

Fon mövqeyi: yuxarı; - fon şəklinin mövqeyini təyin edin: səhifənin yuxarı kənarına təyin edin.

Beləliklə, biz bu konstruksiyanı BODY-də css stil sənədinə daxil etdik:

BODY(fon şəkli: url(fon şəklinin ünvanı); fon-qoşma: sabit; fon-təkrar: təkrar olunmur; fon mövqeyi: yuxarı;)

Ekranın 70%-də sadə cədvəl yaratdım və aydınlıq üçün içinə mətn və iki şəkil yerləşdirdim. Səhifədə əldə etdiyimiz budur: (stasionar fonun təsirini görmək üçün səhifəni yuxarı və aşağı sürüşdürün).

2-ci üsul.

Avtomatik olaraq təkrarlanan və səhifənin bütün yerini dolduran, fon naxışını təşkil edən kiçik bir şəkil qoymağa çalışaq. Şəkili təqdim edirik:

Eyni zamanda, CSS üslub cədvəlində aşağıdakı konstruksiyanı yazaraq bütün fonu düzəldirik:

BODY (fon şəkli: url(fon şəklinin ünvanı); fon qoşması: sabit; )

Burada yalnız parametri təyin edirik: background-attachment: fixed; - yəni arxa fon şəklini hərəkətsiz etmək üçün brauzerə göstəriş verdilər. Şəkilə “çoxalma” demədiyimiz üçün o, bütün ekranda çoxalmalıdır.

3-cü üsul.

Çalışaq ki, bir tərəfə fon şəkli quraşdıraq, əks tərəfdə isə səhifəyə mətn və şəkilləri olan cədvəl yerləşdirək ki, o, fon şəklini bloklamasın. Bunu etmək üçün CSS sənədinə aşağıdakıları yazın:

BODY (fon:#e0ddd8 url(fon şəklinin ünvanı) təkrarlanmayan sabit sol üst )

Fon:#e0ddd8 url (fon şəklinin ünvanı) - fon şəklinin altındakı rəng bejdir, şəklin öz fon rənginə uyğundur. Bu, şəklimizin fona keçidinin görünməməsi üçün edilir (şəkil ekranın yalnız bir hissəsini tutur).

Təkrar yoxdur - şəkil çoxalmır (sevdiyim amerikalı aktyorlardan biri ilə böyük bir şəkil var - Robert Duvall).

Sabit - fon sabitdir, yəni hərəkətsizdir.

Sol üst - ekranın yuxarı sol kənarına düzülür (şəkili sağa, sayt cədvəlini isə sola istədiyiniz kimi qoya bilərsiniz. Bunun üçün cədvəldəki html sənədində yazacaqsınız:

Bu qısa dərs veb saytınızda (və ya bir səhifəlik səhifədə) istifadəçi səhifəni sürüşdürdükcə bir şəkildən digərinə rəvan şəkildə axacaq gözəl sabit fonun necə yaradılması haqqında olacaq. CSS-də fon əlavəsi var: sabit xüsusiyyət, fon şəklini düzəltməyə imkan verir. Yəni səhifəni sürüşdürəndə səhifə ilə birlikdə sürüşməyəcək. Ancaq CSS-də sürüşərkən şəkilləri dəyişdirməyə imkan verən heç bir xüsusiyyət yoxdur, buna görə də Javascript-dən istifadə edəcəyik.

Sayt üçün sabit fon

Nə haqqında yazdığımı başa düşməyə bilərsiniz, ona görə demoya baxın və bu gözəl effekti özünüz görəcəksiniz:

Yüklə

Veb sayt üçün dəyişən fonu necə etmək olar?

HTML

Bu effekti verdiyimiz səhifənin HTML strukturunu təyin etməklə başlayacağıq:

Etiketdə