შეასრულეთ ტექნიკა CSS- თან
თუ თქვენ შექმნით ვებსაიტს, თქვენ შეიძლება დაინტერესებული იყოთ, თუ როგორ შევქმნათ ფიქსირებული ფონის სურათი ან Watermark ვებ-გვერდზე. ეს არის საერთო დიზაინის მკურნალობა, რომელიც საკმაოდ პოპულარულია ონლაინში. ეს არის მოსახერხებელი ეფექტი თქვენი ვებ დიზაინი ჩანთა tricks.
თუ არ გაუკეთებია ეს ადრე თუ შევეცადე მას გარეშე luck, პროცესი შეიძლება როგორც ჩანს, დაშინებას, მაგრამ რეალურად არ არის ძალიან რთული ყველა. ამ მოკლე ტრუტერის მეშვეობით, თქვენ მიიღებთ ინფორმაციას, რომელიც გჭირდებათ CSS- ის გამოყენებით წლების განმავლობაში.
ვიწყებთ
ფონის სურათების ან watermarks (რომლებიც მართლაც ძალიან მსუბუქი ფონზე სურათები) აქვს ისტორია დაბეჭდილი დიზაინი. დოკუმენტებში დიდი ხანია შედის მათთან გადაწერა, რათა თავიდან აიცილონ ისინი. გარდა ამისა, ბევრი ფლაერები და ბროშურები გამოიყენებენ დიდ ფონზე სურათებს, როგორც ნაბეჭდი ნაწილის დიზაინის ნაწილს. ვებ დიზაინი უკვე დიდი ხანია ნასესხები სტილის საწყისი ბეჭდური და ფონზე გამოსახულებები ერთი ამ ნასესხები სტილის.
ეს დიდი ფონური სურათებით ადვილად შექმნათ შემდეგი სამი CSS სტილის თვისებები:
- background-image
- background-repeat
- ფონური დანართი
- ფონური ზომა
ფონის გამოსახულება
თქვენ გამოიყენებთ ფონურ-გამოსახულებას, რათა გამოიყენოთ სურათი, რომელიც გამოყენებული იქნება თქვენი Watermark. ეს სტილის უბრალოდ იყენებს ფაილის გზა ჩატვირთვა იმიჯი, რომ თქვენ გაქვთ თქვენს საიტზე, სავარაუდოდ დირექტორია სახელად "სურათები."
background-image: url (/images/page-background.jpg);
მნიშვნელოვანია, რომ გამოსახულება თავისთავად მსუბუქია ან უფრო გამჭვირვალეა, ვიდრე ნორმალური სურათი. ეს ქმნის "watermark" გამოიყურება, რომელშიც ნახევრად გამჭვირვალე გამოსახულება მდებარეობს ტექსტი, გრაფიკა და სხვა ძირითადი ელემენტების ვებ გვერდზე. ამ ნაბიჯის გარეშე, ფონის სურათი კონკურენციას გაუწევს ინფორმაციას თქვენს გვერდზე და წაიკითხავს.
თქვენ შეგიძლიათ შეცვალოთ ფონური სურათი ნებისმიერი რედაქტირების პროგრამაში, როგორიცაა Adobe Photoshop.
ფონის გამეორება
ფონური განმეორებითი ქონება მომდევნო. თუ გსურთ თქვენი გამოსახულება იყოს დიდი ვატარ-მარკის სტილის გრაფიკული, გამოიყენე ეს ქონება იმისათვის, რომ ეს სურათი მხოლოდ ერთხელ გამოიყურებოდეს.
background- განმეორებითი: არა-განმეორებითი;
გარეშე "არ განმეორებითი" ქონება, რა თქმა უნდა, რომ გამოსახულება გაიმეორება უსასრულოდ გვერდზე. ეს არასასურველია თანამედროვე ვებ-გვერდის დიზაინებში, ამიტომ ეს სტილი უნდა ჩაითვალოს არსებულ თქვენს CSS- ში.
ფონი-დანართი
Background-attachment არის ქონება, რომელიც ბევრი ვებ დიზაინერების დაივიწყოს შესახებ. ის იყენებს თქვენს ფონის სურათს ფიქსირებულ ადგილზე, როდესაც გამოიყენებთ "ფიქსირებულ" ქონებას. ეს არის ის, რაც ამ სურათს გადაჰყავს.
ამ ქონების ნაგულისხმევი მნიშვნელობა "გადახვევა". თუ არ დააკონკრეტებთ background-attachment value, background იქნება გადახვევა ერთად დანარჩენი გვერდზე.
background-attachment: ფიქსირებული;
ფონის ზომა
ფონის ზომა არის ახალი CSS საკუთრება. ეს საშუალებას გაძლევთ დააყენოთ ზომის ფონზე დაყრდნობით viewport იგი მიმდინარეობს გახსნილია სისტემაში. ეს არის ძალიან სასარგებლოა საპასუხო საიტებზე, რომ არიან სხვადასხვა ზომის სხვადასხვა მოწყობილობები .
ფონური ზომა: საფარი;
ორი სასარგებლო ღირებულება შეგიძლიათ გამოიყენოთ ამ ქონებისათვის:
- საფარი - სასწორები ფონზე ასე ან სრული სიგანე ან სრული სიმაღლე ნაჩვენებია. ეს იმას ნიშნავს, რომ სურათის ზოგიერთი ნაწილი ეკრანზე არ გამოჩნდება, არამედ მთელი ტერიტორია დაიფარება.
- შეიცავდეს გამოსახულების გამოსახულებას ისე, როგორც მთელს სიგანეზე და სიმაღლეზე ნაჩვენებია, რომ ეგზემპლარი გამოიყურება. გამოსახულება არ არის შეწყვეტილი, მაგრამ მარცხი ის არის, რომ ტერიტორიის ნაწილები არ შეიძლება იყოს დაფარული გამოსახულება.
დამატება CSS თქვენს გვერდზე
მას შემდეგ, რაც გესმით ზემოთ თვისებები და მათი ღირებულებები, შეგიძლიათ დაამატოთ ეს სტილის თქვენს საიტზე.
დაამატეთ შემდეგი თქვენი ვებ გვერდის სათაურში, თუ თქვენ აკეთებთ ერთგვერდიან საიტს. დაამატეთ ის სტილის სტილის CSS სტილებს, თუ აშენებთ მრავალ გვერდს და გარე ფურცლის მოხმარებას გისურვებთ.