Როგორ გავაფართოვოთ ფონის გამოსახულება ვებ გვერდის შესაქმნელად

მიეცით თქვენი ნახვა ვიზუალური ინტერესი ფონზე გრაფიკა

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

თუ იწყებთ მუშაობას ფონური სურათებით, თქვენ აუცილებლად გადახვალთ სცენარში, სადაც გსურთ სურათის მონაკვეთი გვერდზე მორგებული.

ეს განსაკუთრებით აღსანიშნავია იმ საიტებისთვის, რომელიც გადაეცემა ფართო სპექტრს მოწყობილობებს და ეკრანის ზომებს .

ვებსაიტის დიზაინერებისთვის ძალიან სურვილის გაღების სურვილია იმიტომ, რომ ყველა გამოსახულება არ შეესაბამება ვებგვერდის სივრცეში. ფიქსირებული ზოლის შექმნის ნაცვლად, სურათის გაჭიმვა საშუალებას იძლევა, რომ გვერდი მოერგოს გვერდს, თუ რამდენად ფართო ან ვიწრო ბრაუზერის ფანჯარა .

საუკეთესო გზაა მონაკვეთის სურათის მორგება, რათა გამოიყენოთ CSS3 ქონების გამოყენება ფონზე. აქ არის მაგალითი, რომელიც იყენებს სურათის სურათის ფონის სურათს და რომელიც 100% -ის ზომაზეა დაყენებული ისე, რომ ის ყოველთვის მოჭრილი იქნება ეკრანისთვის.

სხეული {
ფონური: url (bgimage.jpg) არ გამეორება;
ფონური ზომა: 100%;
}

მისი თქმით, caniuse.com, ეს ქონება მუშაობს IE 9 +, Firefox 4 +, Opera 10.5+, Safari 5+, Chrome 10.5+, და ყველა ძირითადი მობილური ბრაუზერები. ეს გულისხმობს ყველა იმ თანამედროვე ბრაუზერს, რომელიც დღეს ხელმისაწვდომია, რაც იმას ნიშნავს, რომ თქვენ უნდა გამოიყენოთ ეს ქონება შიშის გარეშე, რომ ეს ეკრანზე არ იმუშავებს.

გაღრმავებული ფონზე ძველი ბრაუზერები

ძალიან ნაკლებად სავარაუდოა, რომ საჭიროა IE9- ზე უფრო ძველი ბრაუზერების მხარდაჭერა, მაგრამ მოდი ვივარაუდოთ, რომ თქვენ შეშფოთებულია, რომ IE8 მხარს არ უჭერს ამ ქონებას. ამ შემთხვევაში, შეგიძლიათ გაყალბებული ფონი. და შეგიძლიათ გამოიყენოთ ბრაუზერის პრეფიქსები Firefox 3.6 (-moz-background-size) და ოპერის 10.0 (-o- background- ზომა).

უმარტივესი გაყალბებული ფონის სურათის გაღრმავებაა მთელ გვერდზე. მაშინ არ დასრულდება დამატებითი სივრცე ან უნდა ინერვიულოთ, რომ თქვენი ტექსტი შეესაბამება გაჭიმულ ფართობებს. აი როგორ:

id = "bg" />

1. პირველი, დარწმუნდით, რომ ყველა ბრაუზერს აქვს 100% სიმაღლე, 0 ზღვარი და 0 padding on და HTML BODY ელემენტები. მოათავსეთ შემდეგი თქვენი HTML დოკუმენტის ხელმძღვანელი:

2. სურათის დამატება გსურთ, როგორც ვებ-გვერდის პირველი ელემენტი, და მივცეთ მას "ბგ" -ს ID :

3. დააყენეთ ფონი გამოსახულება ისე, რომ ის ზედა და მარცხნივ არის დაფიქსირებული და 100% ფართო და 100% სიმაღლეა. დაამატე ეს თქვენი სტილის ფურცლში:

   img # bg {
   პოზიცია: ფიქსირებული;
   დაბრუნება: 0;
   მარცხნივ: 0;
   სიგანე: 100%;
   სიმაღლე: 100%;
   }

4. დაამატეთ ყველა თქვენი შინაარსი გვერდზე შიგნით DIV ელემენტის ID "შინაარსი". დამატება DIV ქვემოთ სურათზე:

   ყველა თქვენი ფაილი აქ - მათ შორის სათაურები, პუნქტები და ა.შ.

   შენიშვნა: საინტერესოა თქვენი გვერდის ნახვა. გამოსახულება უნდა აისახოს გადაჭიმული, მაგრამ თქვენი შინაარსი სრულიად აკლია. რატომ? იმის გამო, რომ ფონის სურათი არის 100% სიმაღლე, და შინაარსი სამმართველოს შემდეგ გამოსახულება ნაკადი დოკუმენტი - ყველაზე ბრაუზერები არ არიან იგი.
   
5. განათავსეთ თქვენი შინაარსი, რომ ეს არის ნათესავი და აქვს z- ინდექსი 1. ეს ხელს შეუწყობს მას ზემოთ ფონზე გამოსახულება სტანდარტების შესაბამისი პროგრამები. დაამატე ეს თქვენი სტილის ფურცლში:

   #
   პოზიცია: ნათესავი;
   z- ინდექსი: 1;
   }

1. მაგრამ თქვენ არ კეთდება. Internet Explorer 6 არ არის სტანდარტების შესაბამისი და ჯერ კიდევ აქვს გარკვეული პრობლემები. არსებობს ბევრი გზა CSS- ს დამალვა ყველა ბრაუზერიდან, მაგრამ IE6, მაგრამ მარტივი (და, სავარაუდოდ, სხვა პრობლემების გამომწვევი მიზეზების გამო) პირობითი კომენტარები გამოიყენოს. განათავსეთ თქვენი სტილის შემდეგ თქვენი დოკუმენტის ხელმძღვანელი:

2. Inside ყურადღება გაამახვილა კომენტარი, დაამატოთ სხვა სტილის ფურცელი, რათა მიიღოთ IE 6, რომ ითამაშოს ლამაზი:

3. დარწმუნდით, რომ შეამოწმოთ IE 7 და IE 8. თქვენ შეიძლება დაგჭირდეთ შეცვალონ კომენტარი მათთვისაც. თუმცა, იგი მუშაობდა, როდესაც მე გამოცდილი.

OK - ეს არის admittedly WAY overkill. ძალიან ცოტა საიტები უნდა მხარდაჭერა IE 7 ან 8 აღარ, ბევრად ნაკლები IE6!

როგორც ასეთი, ეს მიდგომა არის antiquated და სავარაუდოდ არასაჭირო თქვენთვის. მე აქ დავტოვებ უფრო მეტად, როგორც ცნობისმოყვარეობის მოდელს, თუ რამდენად ბევრად უფრო რთული რამ იყო, ვიდრე ყველა ჩვენს ბრაუზერს ისე მოეკიდა,

გაღრმავებული ფონის გამოსახულება მცირე ზომის სივრცეში

თქვენ შეგიძლიათ გამოიყენოთ მსგავსი მეთოდი ყალბი ფონის სურათის გასწვრივ DIV- ზე ან სხვა ვებ ელემენტზე. ეს ნაკლებად მწვავეა, რადგან თქვენ უნდა გამოიყენოთ აბსოლუტური პოზიციონირება ან უცნაური სივრცითი საკითხები თქვენი გვერდის სხვა ნაწილებისთვის.

1. მოათავსეთ იმიჯი გვერდზე, რომ მე მინდა გამოვიყენო ფონზე.

2. სტილის ფურცელში, გამოსახულია სიგანე და სიმაღლე გამოსახულებისათვის. შენიშვნა, შეგიძლიათ გამოიყენოთ პროცენტული სიგანე ან სიმაღლე, მაგრამ მე ადვილად მოვძებნოთ სიმაღლეზე სიდიდის სიდიდე.

   img # bg {
   სიგანე: 20;
   სიმაღლე: 30;
   }

3. განათავსეთ თქვენი შინაარსი div- ში "content", როგორც ზემოთ გავაკეთეთ:

   თქვენი ყველა ფაილი აქ

4. სტილი content div უნდა იყოს იგივე სიგანე და სიმაღლე, როგორც ფონის სურათი:

   div # content {
   სიგანე: 20;
   სიმაღლე: 30;
   }

5. შემდეგ განათავსეთ შინაარსი იმავე სიმაღლეზე, როგორც გამოსახულება. ასე რომ, თუ თქვენი სურათი არის 30em თქვენ უნდა სტილი დაბრუნება: -30em; არ უნდა დაგვავიწყდეს, რომ შეიტანოთ z- ინდექსი 1-ზე შინაარსი.

   #
   პოზიცია: ნათესავი;
   ზედა: -30;
   z- ინდექსი: 1;
   სიგანე: 20;
   სიმაღლე: 30;
   }

6. შემდეგ დაამატეთ z-index of -1 for IE 6 მომხმარებლებს, როგორც თქვენ გააკეთეთ ზემოთ:

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

და თუ თქვენი კონტენტი შეიცვლის ზომას, თქვენ უნდა შეცვალოთ თქვენი კონტეინერის ზომა და ფონის სურათი, წინააღმდეგ შემთხვევაში, თქვენ დასრულდება უცნაური შედეგებით.