Მობუდარი საიტი: როგორ განვახორციელოთ ფონის სურათი html

ბევრი ახალბედა ვებ დიზაინერებს, მხოლოდ ჩავუღრმავდებით არსი შექმნა საიტები, ხშირად მაინტერესებს, თუ როგორ უნდა გავაკეთოთ html ფონზე გამოსახულება. და თუ ზოგიერთი მათგანი შეიძლება მოგვარდეს ეს პრობლემა, ეს არის კიდევ ერთი პრობლემა დროს გაჭიმვა მთელი სიგანე გამოსახულების მონიტორზე. ამავე დროს, მე მინდა, რომ საიტზე არის ნაჩვენები იდენტურად ყველა ბრაუზერები, ასე რომ უნდა შეასრულოს მოთხოვნებს ჯვარი-ბრაუზერის. თქვენ შეგიძლიათ ფონზე ორი გზა: გამოყენებით HTML tags და CSS სტილის. თითოეული თავად ირჩევს საუკეთესო ვარიანტი. რა თქმა უნდა, CSS სტილი ბევრად უფრო მოსახერხებელია, რადგან მისი კოდი ინახება ცალკე ფაილი და არ დასჭირდეს დამატებითი მშობლიურ მთავარი საიტის tags, მაგრამ პირველი განვიხილოთ მარტივი მეთოდი დაყენების იმიჯი ფონზე საიტზე.

ძირითადი HTML tags შექმნათ ფონზე

ასე რომ, ჩვენ წასვლა კითხვაზე, თუ როგორ, რათა ფონის სურათის html ეკრანზე. იმისათვის, რომ გამოიყურებოდეს ლამაზი საიტი, თქვენ უნდა გვესმოდეს ერთი საკმაოდ მნიშვნელოვანი დეტალი: ეს არის საკმარისი, მხოლოდ იმისათვის, რომ გრადიენტი ფონზე ან ხატავს ეს მყარი ფერადი, მაგრამ თუ თქვენ უნდა ჩაწეროთ ფონის გამოსახულება, იგი არ მონაკვეთი სრული სიგანე მონიტორზე. გამოსახულება თავდაპირველად უნდა შეარჩიო ან საკუთარი დიზაინის გაგრძელება, რომელშიც თქვენ ცარიელია გვერდზე საიტი. მხოლოდ მაშინ, როდესაც ფონის სურათის მზად არის, გადაიტანეთ იგი ფოლდერი სახელად «სურათები». ის, რომ ჩვენ შესანახად ყველა გამოყენებული სურათები, ანიმაცია და სხვა გრაფიკული ფაილი. ამ საქაღალდეში უნდა მდებარეობს root დირექტორია ყველა თქვენი html ფაილი. ახლა თქვენ შეგიძლიათ გადაადგილება და კოდი. არსებობს რამდენიმე ვარიანტი წერა კოდი, რომლითაც ფონზე შეიცვლება სურათს.

1. დაწერეთ tag ატრიბუტი.
2. მეშვეობით CSS სტილის HTML კოდი.
3. დაწერეთ CSS სტილის ცალკე ფაილი.

როგორც HTML რათა background image, თქვენ გადაწყვიტეთ, მაგრამ მე მინდა ვთქვა რამდენიმე სიტყვა, თუ როგორ იქნება ყველაზე ოპტიმალური. პირველი მეთოდი წერილობით მეშვეობით tag ატრიბუტი უკვე დიდი ხანია მოძველდა. მეორე ვარიანტი ძალიან იშვიათად გამოიყენება, რადგან აღმოჩნდება, რომ ბევრი იგივე კოდი. მესამე ვარიანტი არის ყველაზე გავრცელებული და ეფექტური. აქ არის მაგალითები HTML tags:

1. პირველი ჩაწერის მეთოდი მეშვეობით tag ატრიბუტი (ორგანოს) index.htm ფაილი. ინახება ეს ფორმა: (სხეულის background = "საქაღალდის / Nazvanie_kartinki.rasshirenie") (/ ორგანო). ანუ, თუ ჩვენ გვაქვს სურათი, სახელწოდებით «Picture» და გაფართოება JPG, და საქაღალდის დავარქვით «სურათები», მაშინ HTML კოდი შესვლის ასე გამოიყურება: (სხეულის background = "Images / picture.jpg") ... (/ body) .
2. მეორე მეთოდი გულისხმობს ჩაწერა CSS სტილი, მაგრამ ეს არის დაწერილი იგივე ფაილი სახელით index.htm. (Body style = "background: url ( '../ Images / picture.jpg") ").
3. მესამე მეთოდი ჩაწერა მზადდება ორი ფაილი. დოკუმენტის სახელი index.htm tag (ხელმძღვანელი) წერია ასეთი ხაზი: (უფროსი) (link rel = "სტილების" type = "text / css" href = "http: // საიტი / სტატია / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ხელმძღვანელი). ფაილი სახელად style.css სტილი უკვე დაწერა: სხეულის {background: url (Images / picture.jpg ')}.

როგორც HTML რათა background image, ჩვენ გვესმის. ახლა თქვენ უნდა გაერკვნენ, თუ როგორ მონაკვეთი გამოსახულება სიგანე მთელ ეკრანზე.

გზა მონაკვეთი ფონის გამოსახულება სიგანე window

ჩვენ წარმოვადგენთ ჩვენს ეკრანზე სახით პროცენტი. გამოდის, რომ მთელი სიგანე და სიგრძე ეკრანზე იქნება 100% × 100%. ჩვენ უნდა მონაკვეთი გამოსახულება ამ სიგანე. სანიშნეს ფაილის ჩაწერა style.css ხაზი, რომელიც მონაკვეთი გამოსახულება მთელ სიგანე და სიგრძე მონიტორზე. როგორც არის დაწერილი CSS სტილი? ეს მარტივია!

სხეულის

{

background: url (Images / picture.jpg)

background-size: 100%; / * ეს პოსტი განკუთვნილია ყველაზე თანამედროვე ბრაუზერებში * /

}

ასე რომ, ჩვენ figured, თუ როგორ უნდა გააკეთოთ სურათს ფონზე html ეკრანზე. ასევე არსებობს მეთოდი ჩაწერა index.htm ფაილი. მიუხედავად იმისა, რომ ამ მეთოდით და მოძველებულია, მაგრამ დამწყებთათვის აუცილებელია ვიცი და მესმის. ტეგი (ხელმძღვანელი) (სტილი) div {background-size: საფარი; } (/ სტილი) (/ ხელმძღვანელი), ამ ჩანაწერის იმას ნიშნავს, რომ ჩვენ გამოყოს სპეციალური განყოფილება ფონზე, რომელიც იქნება მდგომარეობაში მთელ სიგანე ფანჯარა. ჩვენ განვიხილეთ ორი გზა, თუ როგორ უნდა ფონის სურათი html საიტი, ისე, რომ გამოსახულება გადაჭიმული მთელი სიგანე ეკრანზე ნებისმიერ თანამედროვე ბრაუზერებში.

როგორ გააკეთოს ფიქსირებული ფონზე

თუ გადაწყვეტთ, რომ გამოიყენოთ სურათი, როგორც ფონზე მომავალში ვებ რესურსი, მაშინ უბრალოდ უნდა იცოდეს, თუ როგორ უნდა მიიღოს ეს დაფიქსირდა, ისე, რომ იგი არ გაუწოდა სიგრძის და არ გააფუჭებს ესთეტიკური გამოჩენა. უბრალოდ გამოყენებით HTML კოდი რეგისტრაცია მცირე გარდა. თქვენ უნდა წარადგინოს style.css დაამატოთ ფრაზა შემდეგ background: url (Images / picture.jpg) დაფიქსირდა; ან ნაცვლად ემატება შემდეგ მძიმით ცალკე ხაზი - პოზიცია: ფიქსირებული. აქედან გამომდინარე, თქვენი ფონი იქნება დაფიქსირებული. დროს სენსორული შინაარსის საიტი, ნახავთ, რომ ტექსტი ხაზები მივდივართ, მაგრამ ფონზე რჩება ადგილი. ასე, რომ თქვენ შეიტყო, თუ როგორ html background image, რამდენიმე გზა.

სამუშაო მაგიდები HTML

ბევრი გამოუცდელი ვებ დეველოპერები, წინაშე მაგიდები და კორპუსები, ხშირად არ ესმით, თუ როგორ უნდა html იმიჯის ფონზე მაგიდასთან. ისევე როგორც ყველა გუნდი HTML და CSS სტილის, ვებ პროგრამირების ენაზე საკმაოდ მარტივია. და ამ პრობლემის მოგვარების დაწერა წყვილი ხაზი კოდი. უნდა იცოდეთ, რომ წერილობით მაგიდასთან რიგები და სვეტები, შესაბამისად, როგორც მიერ მითითებულ tags (tr) და (td). იმისათვის, რომ იმ ფონზე, მაგიდაზე სახით გამოსახულება, აუცილებელია, რომ დაამატოთ tag (მაგიდა), (tr) ან (TD) მარტივი ფრაზა მითითებით მინიშნება image: background = URL სურათები. სიცხადე, ვაძლევთ რამდენიმე მაგალითი.

მაგიდა სურათის ნაცვლად ფონზე: HTML მაგალითები

დახაზეთ 2x3 მაგიდა და ეს იმ ფონზე გამოსახულება ინახება საქაღალდეში "სურათები" (მაგიდა background = "Images / picture.jpg") (tr) (TD) 1 (/ td) (td) 2 (/ td) (TD) 3) (/ td) (/ tr) (tr) (TD) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). ასე რომ, ჩვენს მაგიდასთან იქნება შედგენილი ფონზე სურათზე.

ახლა ისეთივე plate ზომის 2x3, მაგრამ ჩადეთ სურათი სვეტები დანომრილია 1, 4, 5 და 6 (მაგიდის) (tr) (td background = "Images / picture.jpg") 1 (/ td) (TD) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / picture.jpg") 4 (/ td) (td background = "Images / picture.jpg") 5 ( / td) (td background = "Images / picture.jpg") 6 (/ td) (/ tr) (/ table). შემდეგ თვალს ვხედავთ, რომ იმ ფონზე, როგორც ჩანს, მხოლოდ იმ საკნებში, სადაც ჩვენ რეგისტრირებული, და არა მთელი მაგიდა.

ჯვრის ბრაუზერის თავსებადობა საიტი

არსებობს ასეთი რამ, როგორც ჯვარი ბრაუზერის თავსებადობა ვებ რესურსი. ეს იმას ნიშნავს, რომ თქვენი საიტი ერთნაირად კარგად ნაჩვენები სხვადასხვა ტიპის და ვერსიები ბრაუზერები. ეს უნდა იყოს HTML კოდი და CSS სტილის სახის საჭირო ბრაუზერები. უფრო მეტიც, თანამედროვე ეპოქაში სმარტ ტელეფონები, ბევრი ვებ დეველოპერები ცდილობენ, რათა შეიქმნას საიტები და ადაპტირებული მობილური და კომპიუტერი სახეს.