Yuva site: fon şəkil etmək üçün necə html

Bir çox təcrübəsiz web dizaynerlər, yalnız saytlar yaradılması mahiyyəti daxil delve, tez-tez html fon necə wonder. bəziləri bu problem ilə məşğul ola bilər, əgər, hələ monitor image bütün eni uzanan zamanı bir problemdir. Eyni zamanda bütün brauzerlərdə eyni göstərilir saytda görmək istəyirəm, belə ki, cross-browser tələblərini yerinə yetirməlidir. Siz iki yolla fon bilərsiniz: istifadə edərək, HTML tags və CSS üslub. özü üçün hər bir ən yaxşı seçim seçir. onun code ayrı bir fayl saxlanılır və əsas site tags əlavə natiqlər almaq deyil, lakin ilk us site fonunda image yüklemek üçün sadə bir üsul hesab edək, çünki Əlbəttə ki, CSS stil daha çox rahatdır.

Basic HTML tags fon yaratmaq

Belə ki, biz ekranda html background image etmək üçün necə sualına gedin. bir gradient fon və ya bir bərk rəng boya kifayətdir, ancaq background image daxil etmək lazımdır, əgər, bu monitor tam eni uzanır deyil: gözəl sayt baxmaq üçün, siz bir daha mühüm detal anlamalıdır. image almaq və ya saytın səhifə göstərilir ki, bu uzadılması ilə öz dizayn etmək ilk lazım idi. background image hazır Yalnız «Şəkillər» adlı bir qovluq daxil sürükleyin. Bu, biz bütün istifadə şəkillər, animasiyalar və digər qrafik fayllar saxlamaq olacaq. Bu qovluq bütün html faylları ilə kök kataloq yerləşdirilir. İndi və kodu hərəkət edə bilər. fon şəkil dəyişəcək olan yazılı kodu bir neçə seçim var.

1. tag atributu yazın.
2. HTML kodu CSS stil vasitəsilə.
3. ayrı fayl CSS üslub yazın.

HTML kimi background image etmək üçün, qərar, ancaq ən optimal olacaq necə haqqında bir neçə söz demək istəyirəm. ilk metodu tag atributu vasitəsilə yazmaqla uzun köhnəlmiş olmuşdur. İkinci variant bu çıxır ki, çünki çox nadir hallarda istifadə olunur eyni kod bir çox. Üçüncü variant ən ümumi və effektiv edir. Burada HTML tags nümunələr:

1. index.htm fayl tag atributu (bədən) vasitəsilə ilk qeyd üsulu. (Bədən fon = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ body): Bu formada saxlanılır. biz adı «Picture» və məsləhət JPG, və biz «Şəkillər» sonra HTML-kodu giriş bu kimi görünür adlı qovluq ilə bir şəkil var ki, əgər: (bədən background = "Şəkillər / Picture.jpg") ... (/ body) .
2. İkinci üsul bir CSS stil qeyd daxildir, lakin bu ad index.htm ilə eyni fayl yazılmışdır. (Body style = "background: url (../ Images / Picture.jpg ')").
3. qeyd Üçüncü üsul iki faylları edilir. (Baş) (link rel = "stil" type = "text / css" href = "http: // site / məqalə / 193110 /% D0% 9F adı index.htm tag (baş) ilə sənəd belə bir xətt yazılı % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ rəhbəri). A fayl deyilən style.css style artıq yazmaq: bədən {background: url (Images / Picture.jpg ')}.

background image etmək üçün HTML kimi, biz başa düşürük. İndi bütün ekran eni boyunca şəkil uzanır necə anlamaq lazımdır.

Ways pəncərə eni background image uzanır

Biz faiz şəklində bizim ekran təmsil edir. Bu ekran bütün eni və uzunluğu 100% × 100% olacaq çevrilir. Biz bu eni image uzatmaq lazımdır. monitor bütün eni və uzunluğu üzərində şəkil keçəcək image fayl qeyd style.css xəttinə əlavə edin. Bu CSS stil yazıldığı kimi? Bu sadə!

bədən

{

background: url (Images / Picture.jpg)

background-size: 100%; / * Bu post * / ən müasir brauzerlərdə üçün uyğun

}

Beləliklə, biz ekranda html bir şəkil fon etmək üçün necə fiqurlu. index.htm fayl qeyd üsulu da var. Bu metodu və köhnəlmiş olsa da, lakin başlayanlar üçün bilmək və anlamaq lazımdır. tag (baş) (stil) div {background-size: cover; } (/ Style) (/ head), bu rekord biz pəncərə bütün eni üzərində yer olacaq fon üçün xüsusi bir vahid ayrılması deməkdir. Biz image müasir brauzerlərdə hər hansı ekran bütün eni uzanırdı ki, bir fon şəkil html site etmək üçün necə iki yol, hesab.

sabit fon etmək üçün necə

Gələcək web resurs fon kimi bir şəkil istifadə etmək istəsəniz deyil uzunluğu uzanırdı və estetik görünüşü korlamaq etməyib, belə ki, sonra yalnız bu müəyyən etmək üçün necə bilmək lazımdır. Sadəcə kiçik bir əlavə qeydiyyatdan HTML kodu istifadə edərək. Siz fon sonra bir söz əlavə etmək üçün style.css fayl lazımdır: url (Şəkillər / Picture.jpg ') müəyyən; və ya əvəzinə nöqtəli vergül ayrı xətt sonra əlavə - mövqe: Sabit. Belə ki, divar kağızı müəyyən olunacaq. saytda content scrolling zamanı, xətləri hərəkət mətn görəcəksiniz, lakin fon yerdə qalır. Belə ki, bir neçə yolla, html background image etmək necə öyrəndim.

HTML masalar İş

Bir çox təcrübəsiz web developers, cədvəllər və blokları ilə qarşı-qarşıya, tez-tez html image background masa etmək necə başa düşmürəm. bütün Like qrupları HTML və CSS üslub, web proqramlaşdırma dili kifayət qədər sadədir. Bu problemin həlli kodu xətləri bir cüt yazmaq üçün. Siz artıq tags (tr) və (td) tərəfindən göstərilən müvafiq olaraq satır və sütun, bir masa yazılı ki, bilməlidir. fon = URL şəkillər: bir resim şəklində masa fon etmək üçün, bu etiketi (cədvəl), (tr) və ya (TD) arayış image istinadən sadə söz əlavə etmək lazımdır. Aydınlıq üçün, biz nümunələri bir neçə verir.

əvəzinə fon bir şəkil ilə Cədvəl: HTML nümunələri

bir 2x3 masa çəkmək və qovluq "Şəkillər" saxlanılır background image etmək: (cədvəl fon = "Şəkillər / Picture.jpg") (tr) (TD) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ cədvəl). Belə ki, bizim masa şəkil fonunda çəkiləcək.

İndi 2x3 eyni nömrəli ölçüləri çəkmək, lakin 1, 4, 5 və 6 (cədvəl) saylı sütun (tr) şəkil (td fon = "Şəkillər / Picture.jpg") 1 (/ td) (td) 2 daxil (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Şəkillər / Picture.jpg") 4 (/ td) (td background = "Şəkillər / Picture.jpg") 5 ( / td) (td background = "Şəkillər / Picture.jpg") 6 (/ td) (/ tr) (/ cədvəl). biz background yalnız biz bütün masa qeydiyyatdan deyil ki, həmin hüceyrələri görünür ki, görürük seyr sonra.

Cross-browser uyğunluğu site

bir cross-browser uyğunluğu web resurs kimi bir şey yoxdur. Bu site eyni müxtəlif növ və brauzerlər versiyasını göstərilir deməkdir. Bu olmalıdır HTML code zəruri brauzerlər özelleştirmek üçün və CSS üslub. Bundan başqa, smart telefonlar müasir dövrdə bir çox web developers sites yaratmaq üçün çalışırıq və mobil versiyası və kompüter baxmaq üçün uyğunlaşdırılmışdır.