მარკირების ენის - HTML - და კასკადური სტილის ფურცლების - CSS - შესაძლებლობები საშუალებას გაძლევთ განათავსოთ ერთი სურათი მეორეში მრავალი გზით. რა თქმა უნდა, ამისათვის საჭიროა გარკვეული უნარ-ჩვევები ვებგვერდის განლაგების პროცესში და თქვენ უნდა აირჩიოთ კონკრეტული მეთოდი არსებული კოდის საფუძველზე. ამასთან, ზოგიერთ შემთხვევაში, შეგიძლიათ გააკეთოთ წყარო კოდის რედაქტირების გარეშე.
ინსტრუქციები
Ნაბიჯი 1
არსებობს გზა, რომ ერთი სურათი მოთავსდეს სხვაში, საიტის გვერდებზე ცვლილებების გარეშე. ამისათვის საკმარისია სერვერზე შენახული ფონის სურათის რედაქტირება - გამოიყენეთ ნებისმიერი გრაფიკული რედაქტორი მასზე წინა პლანზე გამოსახვისთვის. თუ ეს მეთოდი თქვენთვის სასარგებლოა, დაიწყეთ ფონის სურათის ფაილის შენახვის ადგილისა და სახელის განსაზღვრა. ეს შეიძლება გაკეთდეს გვერდის კოდის პოვნაში ან ცალკე ჩანართში გახსნით და ბრაუზერის მისამართის ზოლში სრული ბილიკის დათვალიერებით.
ნაბიჯი 2
შინაარსის მართვის სისტემის ან FTP კლიენტის ფაილების მენეჯერის გამოყენებით, ჩამოტვირთეთ საჭირო ფაილი თქვენს კომპიუტერში და გახსენით იგი ნებისმიერ გრაფიკულ რედაქტორში - მაგალითად, Windows- ზე დაინსტალირებული Paint პროგრამაში.
ნაბიჯი 3
განათავსეთ წინა პლანზე გამოსახული ფონი - Paint- ში ამისათვის უნდა აირჩიოთ "ჩასმა" ელემენტი "ჩასმა" ჩამოსაშლელი სიიდან "საწყისი" ჩანართზე და გახსენით დიალოგში საჭირო ფაილი. შემდეგ შეცვალეთ ჩასმული სურათის პოზიცია არსებულ ფონზე (გადაიტანეთ მაუსით) და შეინახეთ შედეგი (Ctrl + S).
ნაბიჯი 4
დატვირთეთ რედაქტირებული სურათი, გადაწერეთ ძველი. ამით სრულდება პროცედურა.
ნაბიჯი 5
აღწერილი მეთოდი მოუხერხებელია იმ შემთხვევაში, როდესაც ჩასმული ნახატები დროდადრო უნდა შეიცვალოს. შემდეგ გამოიყენეთ HTML ენის შესაძლებლობები - მაგალითად, ფონის სურათი გახადეთ იმ გვერდის ელემენტის ფონი, რომელშიც განთავსდება წინა პლანზე გამოსახული სურათი. ასეთი კონტეინერის ელემენტი შეიძლება იყოს, ვთქვათ, ფენა (div). იმისათვის, რომ სურათების დიდი ნაწილი გახდეს მისი ფონი, თქვენ უნდა გამოიყენოთ სტილის აღწერა - div ნიშნის სტილის ატრიბუტი. ცარიელი კონტეინერი HTML კოდში შეიძლება ასე გამოიყურებოდეს:
ფრჩხილებში თქვენს საიტზე მიუთითეთ ფონური გამოსახულების ფაილის მისამართი და სახელი.
ნაბიჯი 6
შექმენით წინა პლანზე გამოსახულების (img) ტეგი, იმავე სტილის ატრიბუტის გამოყენებით, რომ დააყენოთ ფონის ოდენობა ფონის კონტეინერის კიდეებიდან. Მაგალითად:
აქ, სიგანის და სიმაღლის ატრიბუტები ადგენენ სურათის ზომებს, ხოლო შევსების შემდეგ ოთხი რიცხვი მიუთითებს პიქსელებში ავსებას კონტეინერის კიდეებიდან, დაწყებული ზემოდან (50) და შემდგომი საათის ისრის მიმართულებით (60 - მარჯვნივ, 70 - ქვედა, 80 - მარცხნივ).
ნაბიჯი 7
განათავსეთ img ტეგი კონტეინერში:
ნაბიჯი 8
შექმენით სტრიქონები დაამატეთ გვერდის კოდს და შემდეგ, შეცვალეთ საცობები, შეცვალეთ ჩასმული სურათის პოზიცია ფონის სურათის ფონზე.
