Sabit, sürüşən fon şəkilləri. Sabit, sürüşən fon şəkilləri Səhifə fonu kimi şəkil - CSS
24.08.2023
Biz mətn və digər olacaq masa altında sabit fon image quraşdırarkən faydalı məlumat, aşağıdakı effekt yaradılır: mətni olan cədvəli sürüşdürərkən, onun altındakı fon hərəkətsiz 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):
Sənədləşmək üçün css üslubları, BODY üçün parametrləri təyin etdiyimiz yerə 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 fon şəkli kimi götürürük böyük şəkil tam ekran (məsələn, 1280x1024 piksel).
Qeyd:Əgər css üslublu 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ə edin.
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ı;)
yaratdım sadə masa ekranın 70% -də və aydınlıq üçün mətn və iki şəkil yerləşdirdi. 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 yalnız ekranın 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:
Trepachev D.P. 2012-2020
Tələbələrə: Yanvarın 6-na kimi məzuniyyətim var, məzuniyyət zamanı bacardıqca cavab verəcəm, bəzən bir neçə günə yoxa çıxa bilirəm
Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Əsas dərsliyi HTML Referansı CSS istinadı OOP və MVC təlimatı Video dərsləri Əsas dərsliyi Referans Video dərsləri Əsas dərsliyi Əsas dərsliyi Əsas dərsliyi Administratorun təlimatı Tərtibatçının təlimatı AJAX+PHP
fon əlavə xüsusiyyəti
Əmlak fon-qoşma elementin fon şəklinin necə sürüşdürüləcəyini müəyyənləşdirir: mətnlə birlikdə və ya mətn şəklin üzərində sürüşəcək.
Sintaksis
Seçici ( fon-qoşma: sabit | sürüşdürün | yerli; )
Dəyərlər
Defolt dəyər: sürüşdürün.
Misal. sürüşdürmə dəyəri
İndi əmlak fon-qoşma təyin edin sürüşdürün. Elementi şaquli olaraq sürüşdürün - mətnin fonla birlikdə sürüşməsini görəcəksiniz:
Son məqalədə etiket atributlarından istifadə edərək veb-saytda fon rəngini necə dəyişdirmək barədə danışdıq bədən və CSS üslubları: . Bu məqalədə vebsaytda şəkillərin fon kimi istifadə edilməsi, fonun səhifənin tam eninə qədər uzanması və onu necə düzəltmək barədə danışılacaq.
Şəkil səhifə fonu kimi - HTML
Əvvəlcə atributdan istifadə edərək saytda fon şəklinin necə qurulacağını nəzərdən keçirək fon etiket bədən:
HTML istifadə edərək fon şəkli
Burada fon şəkli bədən etiketinin fon atributundan istifadə etməklə təyin edilir.
Yuxarıdakı nümunədə olduğu kimi, təsvirə əlavə olaraq, fon şəklinə ən yaxşı uyğun gələn və mətnlə kontrast yaradan fon rəngini də (səhifə yüklənərkən saytda göstəriləcək) göstərməyiniz tövsiyə olunur. saytda. Məsələn, veb saytınızda ağ mətn rəngindən istifadə edirsinizsə, o zaman tünd fon rəngi təyin etməli və tünd fon şəklini təyin etməlisiniz. Bu halda mətni oxumaq asan olacaq.
Qeyd: Fon şəklini və fon rəngini HTML əvəzinə CSS istifadə edərək təyin etmək tövsiyə olunur. Bu halda kod etibarlı və daha düzgün olacaq.
Şəkil səhifə fonu kimi - CSS
CSS-də fon rəngi və fon şəkli bir xüsusiyyətdə təyin edilə bilər fon:
CSS istifadə edərək fon şəkli
Burada fon şəkli fon CSS xassəsindən istifadə etməklə qurulur.
Burada əmlak istifadə fon-qoşma səhifə fonu sabit və mülkiyyətdən istifadə edilir fon-təkrar təsvirin üfüqi təkrarlanması təyin edilir. Ancaq nəzərə almağa dəyər ki, fon şəkli kənarların ətrafında yaxşı "tikişli" olmalıdır.
Fon şəklini brauzer pəncərəsinin tam ölçüsünə qədər uzatmaq istəyirsinizsə, mülkiyyətdən istifadə edin fon ölçüsü: 100%;
Nubex veb sayt qurucusunda siz istənilən vebsayt üçün fon kimi böyük bir şəkil istifadə edə və onu sanclaya bilərsiniz.
Qısa məlumat
CSS versiyaları
Dəyərlər
fixed Elementin fon şəklini hərəkətsiz edir.
sürüşdürün Fonun məzmunla birlikdə hərəkət etməsinə imkan verir.
varis Valideyn dəyərini miras alır.
yerli Fon elementin davranışı nəzərə alınmaqla müəyyən edilir. Elementdə sürüşdürmə varsa, fon məzmunla birlikdə sürüşəcək, lakin elementdən kənar fon yerində qalacaq.
Internet Explorer 6-da sabit yalnız teqlər üçün işləyir
və ya
Internet Explorer-in 7.0-a qədər olan versiyaları vərəsəlik dəyərini dəstəkləmir.
Chrome 4.0 versiyasından bəri yerli dəyəri dəstəkləyir.
Safari 5.0 versiyasından bəri yerli dəyəri dəstəkləyir.
Firefox yerli mənasını anlamır.
Demək olar ki, hər bir məşhur veb saytın gözəl görünüşü var. Veb sayt dizaynının vacib hissəsi hər birimizin yarada və ya dəyişdirə biləcəyi fon adlanan fondur. Bu yazıda sizə veb-sayta necə fon qoyacağınızı söyləyəcəyəm.
Veb saytlar üçün yeni fon yaratmaq
Tapşırığı yerinə yetirmək üçün 4 üsuldan birini istifadə edə bilərsiniz:
1. Bir rənglə fon
2. Tekstura ilə fon
3. Qradiyentdən istifadə edərək fon 4. Böyük təsvirdən fon Bir rəngdən istifadə edərək fon yaradın
Bir rəngdən ibarət olan saytın fonunu yaratmaq və ya dəyişdirmək üçün fayla daxil olmaq lazımdır
style.css
, hansı dəyəri tapın - bədən (saytın əsas hissəsinə cavabdehdir). İndi fon rəngi funksiyasını qeydiyyatdan keçirməli və rəng kodunu göstərməlisiniz. Veb sayt üçün ağ fon yaratmağınız lazım olduqda, aşağıdakı kodu yazmalı olacaqsınız:
fon rəngi: #83C5E9 ; (nümunədə olduğu kimi mavi fon)
Rənglərin tam siyahısını veb saytında tapa bilərsiniz - (STM). Rəngi dəyişdirmək üçün sadəcə olaraq iki nöqtədən sonra dəyəri dəyişdirin və səylərinizdən həzz alın.
Teksturadan istifadə edərək fon yaratmaq
Bu kodda rəngin saxlanması üçün tanış parametr (yaşıldır) və yaşıl toxumanı birləşdirməyə cavabdeh olan element var.
Qradiyentdən istifadə edərək fon yaratmaq
CSS funksiyaları ilə birləşdirilən hər hansı bir şəkil həm üfüqi, həm də şaquli (oxlar boyunca) təkrarlana bilər. X Və Y). Bu fürsət sayt üçün öz əllərimizlə istənilən sadə fon yaratmağa imkan verir. Bunun üçün siz 1 meqapiksel genişlikdə qradient yaratmalısınız (aşağıdakı şəkilə baxın), onu şəkil kimi saxlayıb hostinqinizə yükləməlisiniz. Bundan sonra lazımi kodu yaza bilərsiniz, yəni:
fon rəngi: #83C5E9;
fon şəkli: url(şəkillər/gradient.jpg);
fon-təkrar: təkrar-x;
Bu dəstdə, prioritet sırasına görə, təkrar sığorta üçün istifadə etdiyimiz fon rənginə cavabdeh olan bir funksiya var. Bundan sonra, gradienti birləşdirməyə cavabdeh olan bir parametr və nəhayət, X oxu boyunca gradientin təkrarlanmasına cavabdeh olan bir funksiya.
Veb saytın fonu üçün böyük bir şəkil istifadə
Bu üsul ikinci ən populyardır, çünki fon yaratmaq üçün müxtəlif şəkillərdən istifadə etməyə imkan verir. Bu metodu həyata keçirmək üçün saytın şəkillər qovluğuna böyük bir şəkil yükləmək və aşağıdakı kodu daxil etmək kifayətdir:
fon rəngi: #000000;
fon şəkli: url(şəkillər/şəkil başlığı.jpg);
fon mövqeyi: mərkəzi yuxarı;
fon-təkrar: təkrarlanmamaq;
İlk iki parametrlə hər şey aydındırsa, son ikisini əhatə etmək lazımdır. Üçüncü funksiya görüntünü saytın mərkəzində düzəltməyə imkan verir və sonuncu parametr bütün səhifə strukturunda onun təkrarlanmasını bloklayır.
ucoz saytlarında fonun dəyişdirilməsi
Sayt üçün fon yaratmağın həmin üsulları müxtəlif məzmun idarəetmə sistemlərində istifadə oluna bilər, lakin saytlarda deyil - ucoz. ucoz veb-saytının fonunu dəyişmək üçün saytın idarəetmə panelinə daxil olmaq lazımdır "Dizayn İdarəetmə", sonra daxil "Şablonları redaktə etmək".
İndi Stil Vərəqini (CSS) açmalı, xətti tapmalısınız "bədən" və parametr "fon". Bundan sonra, linki kopyalamalı, İnternet brauzerinizə yapışdırmalısınız və arxa planda olan şəkilə giriş əldə edəcəksiniz.
Yeni fondan istifadə etmək üçün onu sadəcə Fayl menecerinə yükləmək lazımdır. Eyni zamanda, yeni fon şəklinin adının dəyişiklikdən əvvəlki ilə eyni olduğundan əmin olun. İşinizi yadda saxlayın və görülən işə baxmaq üçün vebsayta keçin.
Saytın fonunun HTML-ə dəyişdirilməsi
Şəkildən istifadə edərək html saytında fon yaratmaq istəyirsinizsə, kodun içindəki sətri daxil edin:
Və saytın fonunu rəngdən istifadə etmək istəyirsinizsə, xətt belə görünməlidir:
Bu hekayəmizi yekunlaşdırır. İndi bir veb sayt üçün fon yaratmağı bilirsiniz. Xoşbəxt layihələr!
