Როგორ დავამატოთ საპასუხო ფონის სურათები საიტი

აი, როგორ დაამატოთ საპასუხო დიზაინი სურათების გამოყენებით CSS

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

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

სინამდვილეში, ეს "სითხის გამოსახულება" ერთ-ერთი ყველაზე მნიშვნელოვანი მხარეების ერთ-ერთი მნიშვნელოვანი ნაწილია (სითხის ქსელისა და მედიის შეკითხვების გარდა). ამ სამი ნაწილის დასაწყისი თავიდანვე იყო ვებ-გვერდის საპასუხოდ, მაგრამ მიუხედავად იმისა, რომ ის ყოველთვის ადვილად დაამატოთ საპასუხო inline images site (inline images are გრაფიკული, რომლებიც კოდირებული ნაწილი HTML მარკირებას), აკეთებს იგივე ფონურ სურათებს (რომლებიც ე.წ. CSS- ის ფონური თვისებების გამოყენებით შეიმუშავეს) დიდხანს უზრუნველყოფდა ბევრ ვებ დიზაინერს და წინა ბოლო დეველოპერებს. საბედნიეროდ, ეს შესაძლებელი გახდა CSS- ში "background-size" ქონების დამატება.

ცალკე სტატიაში, მე დაფარული როგორ გამოიყენოთ CSS3 ქონების background- ზომა მონაკვეთის გამოსახულებები შეესაბამება ფანჯარაში, მაგრამ არსებობს უფრო უკეთესი, უფრო სასარგებლო გზა განათავსოს ამ ქონების. ამისათვის ჩვენ გამოვიყენებთ შემდეგ ქონებას და ღირებულებას:

ფონური ზომა: საფარი;

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

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

როგორ გამოვიყენოთ background- ზომა: საფარი;

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

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

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

ატვირთეთ თქვენი სურათი თქვენი ვებ ჰოსტისთვის და დაამატეთ თქვენი CSS, როგორც ფონის სურათი:

background-image: url (fireworks-over-wdw.jpg);
background- განმეორებითი: არა-განმეორებითი;
ფონური პოზიცია: ცენტრის ცენტრი;
background-attachment: ფიქსირებული;

სანიშნეს ბრაუზერის prefixed CSS პირველი:

-ვებრი-ფონის ზომა: საფარი;
-moz-background- ზომა: საფარი;
-ო-ფონის ზომა: საფარი;

შემდეგ დაამატეთ CSS ქონება:

ფონური ზომა: საფარი;

სხვადასხვა სურათების გამოყენებით, რომლებიც განსხვავდება სხვადასხვა მოწყობილობებისგან

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

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

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

ჯენიფერი კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard 9/12/17