ავტორისგან:Გამარჯობა ყველას. ფონის ფერები და სურათები უზარმაზარ როლს თამაშობენ ვებ დიზაინში, რადგან ისინი საშუალებას გაძლევთ შექმნათ ნებისმიერი ელემენტი უფრო მიმზიდველად. დღეს ჩვენ განვიხილავთ, თუ როგორ უნდა გავაკეთოთ ფონი HTML-ში.
შესაძლებელია თუ არა HTML-ის გამოყენება ფონის დასაყენებლად?
მაშინვე ვიტყვი, რომ არა. ზოგადად, html არ შეიქმნა ვებ გვერდების დიზაინისთვის. უბრალოდ ძალიან მოუხერხებელია. მაგალითად, არის bgcolor ატრიბუტი, რომლითაც შეგიძლიათ დააყენოთ ფონის ფერი, მაგრამ ეს ძალიან მოუხერხებელია.
შესაბამისად, ჩვენ გამოვიყენებთ Cascading Style Sheets (CSS). ფონის დაყენების ბევრად მეტი შესაძლებლობაა. დღეს ჩვენ განვიხილავთ ყველაზე ძირითადს.
როგორ დავაყენოთ ფონი css-ის გამოყენებით?
ასე რომ, პირველ რიგში, თქვენ უნდა გადაწყვიტოთ რომელ ელემენტზე გსურთ ფონის დაყენება. ანუ უნდა ვიპოვოთ სელექტორი, რომელსაც დავწერთ წესს. მაგალითად, თუ თქვენ გჭირდებათ ფონის დაყენება მთლიანი გვერდისთვის, ამის გაკეთება შეგიძლიათ სხეულის ამორჩევის საშუალებით, ხოლო ყველა ბლოკისთვის div სელექტორის საშუალებით. ისე და ა.შ. ფონი შეიძლება და უნდა იყოს მიბმული ნებისმიერ სხვა სელექტორთან: სტილის კლასები, იდენტიფიკატორები და ა.შ.
მას შემდეგ რაც გადაწყვეტთ სელექტორს, თქვენ უნდა დაწეროთ თავად ქონების დასახელება. ფონის ფერის დასაყენებლად (კერძოდ მყარი ფერი და არა გრადიენტი ან სურათი), გამოიყენეთ ფონის ფერის თვისება. ამის შემდეგ თქვენ უნდა დააყენოთ ორწერტილი და დაწეროთ თავად ფერი. ეს შეიძლება გაკეთდეს სხვადასხვა გზით. მაგალითად, საკვანძო სიტყვების, hex კოდის, rgb, rgba, hsl ფორმატების გამოყენებით. ნებისმიერი მეთოდი გამოდგება.
ყველაზე ხშირად გამოყენებული მეთოდი არის თექვსმეტობითი კოდი. ფერების შესარჩევად შეგიძლიათ გამოიყენოთ პროგრამა, რომელიც აჩვენებს ფერის კოდს. მაგალითად, photoshop, paint ან რაიმე ონლაინ ინსტრუმენტი. შესაბამისად, მაგალითად, დავწერ ზოგად ფონს მთელი ვებ გვერდისთვის.
სხეული (ფონის ფერი: #D4E6B3;)
ეს კოდი უნდა იყოს ჩასმული ხელმძღვანელის განყოფილებაში. მნიშვნელოვანია, რომ ფაილები იმავე საქაღალდეში იყოს.
სურათი ფონის სახით
სურათისთვის მე გამოვიყენებ პატარა html ენის ხატულას:
მოდით შევქმნათ ცარიელი ბლოკი იდენტიფიკატორით:
< div id = "bg" > < / div > |
მოდით მივცეთ მას აშკარა ზომები და ფონი:
#bg (სიგანე: 400 პიქსელი; სიმაღლე: 250 პიქსელი; ფონის სურათი: url (html.png); )
#ბგ( სიგანე: 400px; სიმაღლე: 250px; ფონი - სურათი: url (html. png); |
ამ კოდიდან ხედავთ, რომ მე გამოვიყენე ახალი თვისება - background-image. იგი განკუთვნილია სპეციალურად სურათის ჩასართავად, როგორც HTML ელემენტის ფონი. ვნახოთ რა მოხდა:
სურათის დასაზუსტებლად, თქვენ უნდა დაწეროთ საკვანძო სიტყვა url ორწერტილის შემდეგ და შემდეგ მიუთითოთ ფაილის გზა ფრჩხილებში. ამ შემთხვევაში, გზა მითითებულია იმის საფუძველზე, რომ სურათი არის იმავე საქაღალდეში, სადაც html დოკუმენტი. თქვენ ასევე უნდა მიუთითოთ სურათის ფორმატი.
თუ ეს გააკეთეთ და ფონი კვლავ არ არის ნაჩვენები ბლოკში, კვლავ შეამოწმეთ, სწორად დაწერეთ თუ არა სურათის სახელი, სწორად არის თუ არა დაყენებული გზა და გაფართოება. ეს არის ყველაზე გავრცელებული მიზეზები, რის გამოც ფონი უბრალოდ არ ჩანს, რადგან ბრაუზერი ვერ პოულობს სურათს.
მაგრამ შენიშნე ერთი რამ? ბრაუზერმა აიღო და გაამრავლა სურათი მთელ ბლოკში. მაშ ასე, რომ იცოდეთ, ეს არის ფონის სურათების ნაგულისხმევი ქცევა - ისინი მეორდება ვერტიკალურად და ჰორიზონტალურად, სანამ ბლოკში მოთავსდება. ამ ქცევით თქვენ შეგიძლიათ მარტივად გააკონტროლოთ. ამისათვის გამოიყენეთ ფონის გამეორების თვისება, რომელსაც აქვს 4 ძირითადი მნიშვნელობა:
Repeat – ნაგულისხმევი მნიშვნელობა, სურათი მეორდება ორივე მხრიდან;
Repeat-x – მეორდება მხოლოდ x ღერძზე;
Repeat-y – მეორდება მხოლოდ y ღერძის გასწვრივ;
No-repeat – საერთოდ არ მეორდება;
თქვენ შეგიძლიათ დაწეროთ თითოეული მნიშვნელობა და ნახოთ რა მოხდება. დავწერ ასე:
ფონი-გამეორება: გამეორება-x;
ფონი - გამეორება: გამეორება - x; |
ახლა გაიმეორეთ მხოლოდ ჰორიზონტალურად. თუ დააყენებთ გამეორებას, მაშინ იქნება მხოლოდ ერთი სურათი.
შესანიშნავია, ჩვენ შეგვიძლია დავასრულოთ აქ, რადგან ეს არის ფონზე მუშაობის ძირითადი შესაძლებლობები, მაგრამ მე გაჩვენებთ კიდევ 2 თვისებას, რომელიც საშუალებას გაძლევთ მიიღოთ მეტი კონტროლი.
განმეორებით, განლაგების დიზაინერებს შეეძლოთ შეექმნათ ფონის ტექსტურები და გრადიენტები ერთი პატარა სურათის გამოყენებით. ეს შეიძლება იყოს 30 10 პიქსელი ან უფრო მცირე. ან იქნებ ცოტა მეტიც. გამოსახულება ისეთი იყო, რომ როდესაც ის მეორდებოდა ერთ ან თუნდაც ორივე მხარეს, არანაირი გადასვლები არ ჩანდა, ამიტომ შედეგი იყო ერთიანი, უწყვეტი ფონი. სხვათა შორის, ამ მიდგომის გამოყენება ახლა ღირს, თუ გსურთ გამოიყენოთ უწყვეტი ტექსტურა თქვენს ვებსაიტზე, როგორც ფონზე. დღეს უკვე შესაძლებელია გრადიენტის დანერგვა css3 მეთოდების გამოყენებით, ამაზე მოგვიანებით აუცილებლად ვისაუბრებთ.
ფონის პოზიცია
ნაგულისხმევად, ფონის სურათი, თუ ის არ არის დაყენებული გამეორებაზე, იქნება მისი ბლოკის ზედა მარცხენა კუთხეში. მაგრამ პოზიცია შეიძლება ადვილად შეიცვალოს ფონის პოზიციის თვისების გამოყენებით.
თქვენ შეგიძლიათ დააყენოთ იგი სხვადასხვა გზით. ერთი ვარიანტია უბრალოდ მიუთითოთ მხარეები, რომლებშიც უნდა იყოს განთავსებული სურათი:
ფონის პოზიცია: მარჯვენა ზედა;
ფონი - პოზიცია: მარჯვენა ზედა; |
ანუ, ვერტიკალურად ყველაფერი იგივე რჩება: ფონის სურათი მდებარეობს თავზე, მაგრამ ჰორიზონტალურად ჩვენ შევცვალეთ მხარე მარჯვნივ, ანუ მარჯვნივ. პოზიციის დადგენის კიდევ ერთი გზა არის პროცენტული მაჩვენებელი. ამ შემთხვევაში, ათვლა ნებისმიერ შემთხვევაში იწყება ზედა მარცხენა კუთხიდან. 100% - მთელი ბლოკი. ამრიგად, სურათის ცენტრში ზუსტად დასაყენებლად, ჩვენ ვწერთ მას ასე:
ფონის პოზიცია: 50% 50%;
ფონის პოზიცია: 50% 50%; |
დაიმახსოვრე ერთი მნიშვნელოვანი რამ პოზიციონირების შესახებ - პირველი პარამეტრი ყოველთვის არის ჰორიზონტალური პოზიცია, ხოლო მეორე არის ვერტიკალური პოზიცია. ასე რომ, თუ ხედავთ მნიშვნელობას 80% 20%, მაშინვე შეგიძლიათ დაასკვნათ, რომ ფონის სურათი გადაინაცვლებს ძალიან მარჯვნივ, მაგრამ ის დიდად არ დაიწევს.
და ბოლოს, თქვენ შეგიძლიათ მიუთითოთ პოზიცია პიქსელებში. ყველაფერი იგივეა, მხოლოდ %-ის ნაცვლად იქნება px. ზოგიერთ შემთხვევაში, ასეთი პოზიციონირება შეიძლება საჭირო გახდეს.
სხარტი აღნიშვნა
დამეთანხმებით, რომ კოდი აღმოჩნდება საკმაოდ რთული, თუ ყველაფერი ისეა დაყენებული, როგორც ჩვენ გავაკეთეთ. გამოდის, რომ სურათისკენ მიმავალი გზა უნდა იყოს მითითებული, გამეორება და პოზიცია. რა თქმა უნდა, გამეორება და პოზიცია ყოველთვის არ არის საჭირო, მაგრამ ნებისმიერ შემთხვევაში, უფრო სწორი იქნება ქონების სტენოგრაფიის გამოყენება. ეს ასე გამოიყურება:
ფონი: #333 url(bg.jpg) გამეორების გარეშე 50% 50%;
ფონი: #333 url(bg.jpg) გამეორების გარეშე 50% 50%; |
ანუ, პირველი ნაბიჯი არის მთლიანი მყარი ფონის ფერის ჩაწერა, საჭიროების შემთხვევაში. შემდეგ გზა გამოსახულებისკენ, გამეორებისა და პოზიციისკენ. თუ რაიმე პარამეტრი არ არის საჭირო, უბრალოდ გამოტოვეთ იგი. ვეთანხმები, ეს ბევრად უფრო სწრაფი და მოსახერხებელია და ჩვენ ასევე მნიშვნელოვნად ვამცირებთ ჩვენს კოდს. ზოგადად, გირჩევთ, ყოველთვის დაწეროთ შემოკლებული ფორმით, თუნდაც მხოლოდ ფერის ან სურათის მითითება დაგჭირდეთ.
ფონის სურათის ზომის კონტროლი
ჩვენი ამჟამინდელი სურათი არც თუ ისე კარგია შემდეგი ხრიკის დემონსტრირებისთვის, ამიტომ მე ავიღებ სხვას. დაე იყოს ბლოკის ზომა ან მეტი. ასე რომ, წარმოიდგინეთ, რომ თქვენ წინაშე გაქვთ ფონის სურათის შექმნა ისე, რომ მან მთლიანად არ შეავსოს თავისი ბლოკი. და სურათი, მაგალითად, კიდევ უფრო დიდია ვიდრე ბლოკის ზომა.
რა შეგიძლიათ გააკეთოთ ამ შემთხვევაში? რა თქმა უნდა, უმარტივესი და ყველაზე გონივრული ვარიანტი იქნება სურათის უბრალოდ შემცირება, მაგრამ ამის გაკეთება ყოველთვის არ არის შესაძლებელი. ვთქვათ სერვერზეა და ამ მომენტში მისი შემცირების დრო და შესაძლებლობა არ არის. პრობლემის გადაჭრა შესაძლებელია ფონის ზომის თვისების გამოყენებით, რომელსაც შეიძლება ეწოდოს შედარებით ახალი და რომელიც საშუალებას გაძლევთ მანიპულიროთ ფონის სურათის ზომით და მართლაც ნებისმიერი ფონის ზომით.
ასე რომ, ჩემი სურათი ახლა მთელ ადგილს იკავებს ბლოკში, მაგრამ მე მივცემ მას ფონის ზომას:
ფონის ზომა: 80% 50%;
ფონის ზომა: 80% 50%; |
ისევ პირველი პარამეტრი ადგენს ჰორიზონტალურ ზომას, მეორე - ვერტიკალურ ზომას. ჩვენ ვხედავთ, რომ ყველაფერი სწორად იქნა გამოყენებული - ფოტო გახდა ბლოკის სიგანის 80% სიგანეში და ნახევარი სიმაღლეში. აქ თქვენ უბრალოდ უნდა გააკეთოთ ერთი განმარტება - ზომის პროცენტულად დაყენებით, შეგიძლიათ გავლენა მოახდინოთ სურათის პროპორციებზე. ამიტომ ფრთხილად იყავით, თუ გსურთ პროპორციები არ დაარღვიოთ.
როგორც თქვენ მიხვდით, ფონის ზომა ასევე შეიძლება მითითებული იყოს პიქსელებში. არსებობს კიდევ ორი საკვანძო სიტყვა, რომელთა გამოყენებაც შესაძლებელია:
საფარი - გამოსახულება მასშტაბირებული იქნება ისე, რომ მინიმუმ ერთ მხარეს იგი მთლიანად ავსებს ბლოკს.
Contain – ადიდებს მას ისე, რომ გამოსახულება მთლიანად ჯდება ბლოკში მისი მაქსიმალური ზომით.
ამ მნიშვნელობების უპირატესობა ის არის, რომ ისინი არ ცვლიან სურათის პროპორციებს, ტოვებენ მათ იგივეს.
ასევე უნდა გესმოდეთ, რომ სურათის გაჭიმვამ შეიძლება გამოიწვიოს მისი ხარისხის გაუარესება. შემიძლია მაგალითი მოვიყვანო განლაგების დიზაინერების ცხოვრებიდან და რეალური პრაქტიკიდან. ყველამ იცის და ესმის, რომ დესკტოპისთვის დიზაინის შექმნისას საჭიროა საიტის ადაპტირება ძირითადი მონიტორის სიგანეზე: 1280, 1366, 1920. თუ ფონის სურათს იღებთ, ვთქვათ, 1280-ზე 200-ზე და არ აძლევთ მას. ფონის ზომა, შემდეგ ეკრანები უფრო დიდი სიგანით გამოჩნდება ცარიელი ადგილი, სურათი ბოლომდე არ შეავსებს სიგანეს.
99% შემთხვევაში, ეს არ უხდება ვებ დეველოპერს, ამიტომ ის ადგენს ფონის ზომას: საფარი ისე, რომ სურათი ყოველთვის გადაჭიმული იყოს ფანჯრის მაქსიმალურ სიგანემდე. ეს არის კარგი ტექნიკა გამოსაყენებლად, მაგრამ ახლა თქვენ შეგექმნებათ პრობლემა, რომ მომხმარებლებს, რომელთა ეკრანის სიგანე 1920 პიქსელია, შეიძლება დაინახონ არაოპტიმალური სურათის ხარისხი.
შეგახსენებთ, ის მაქსიმალურ სიგანემდე გაიჭიმება. შესაბამისად, ხარისხი ავტომატურად გაუარესდება. ერთადერთი სწორი გამოსავალი აქ იქნება თავდაპირველად უფრო დიდი სურათის გამოყენება - 1920 პიქსელის სიგანე. შემდეგ ყველაზე ფართო ეკრანებზე ის იქნება ბუნებრივი ზომით, ხოლო სხვებზე ის უბრალოდ თანდათან ამოიჭრება, მაგრამ ამავე დროს, თუ ფონის სურათი სწორად არის შერჩეული, ეს არ იმოქმედებს საიტის გარეგნობაზე.
ზოგადად, ეს არის მხოლოდ 1 მაგალითი იმისა, თუ როგორ გამოიყენოთ ამ სტატიაში მიღებული ცოდნა რეალური განლაგების განლაგებისას.
გამჭვირვალე ფონი css-ის გამოყენებით
კიდევ ერთი ფუნქცია, რომელიც შეიძლება განხორციელდეს css-ის გამოყენებით, არის გამჭვირვალე ფონი. ანუ ამ ფონის მეშვეობით შესაძლებელი იქნება იმის დანახვა, თუ რა დგას მის უკან.
მაგალითად, მე დავაყენებ მთელ გვერდს იმ სურათის ფონად, რომელიც ადრე გამოვიყენეთ მაგალითებში. bg იდენტიფიკატორის მქონე ბლოკისთვის, რომელზეც ჩვენ ვატარებთ ყველა ჩვენს ექსპერიმენტს, ჩვენ დავაყენებთ ფონს rgba ფერის დაყენების ფორმატის გამოყენებით.
როგორც ადრე ვთქვი, CSS-ში ფერების დაყენების მრავალი ფორმატია. ერთ-ერთი მათგანია rgb, საკმაოდ კარგად ცნობილი ფორმატი მათთვის, ვინც მუშაობს გრაფიკულ რედაქტორებში. ასე წერია: rgb(17, 255, 34);
ფრჩხილებში პირველი მნიშვნელობა არის წითელი, შემდეგ მწვანე, შემდეგ ლურჯი გაჯერება. მნიშვნელობა შეიძლება იყოს რიცხვითი 0-დან 255-მდე. შესაბამისად, rgba ფორმატი არ განსხვავდება, დამატებულია მხოლოდ ერთი პარამეტრი - ალფა არხი. მნიშვნელობა შეიძლება იყოს 0-დან 1-მდე, სადაც 0 არის სრული გამჭვირვალობა.
მოკლე ინფორმაცია
CSS ვერსიები
ღირებულებები
url მნიშვნელობა არის გზა გრაფიკული ფაილისკენ, რომელიც მითითებულია url() კონსტრუქციის შიგნით. ფაილის გზა შეიძლება დაიწეროს ბრჭყალებში (ორმაგი ან ერთჯერადი) ან მათ გარეშე. none გათიშავს ელემენტის ფონის სურათს. inherit მემკვიდრეობით იღებს მშობლის ღირებულებას.HTML5 CSS2.1 IE Cr Op Sa Fx
ობიექტის მოდელი
document.getElementById("elementID").style.backgroundImage
ბრაუზერები
Internet Explorer-ის ვერსიები 7.0-მდე და მათ შორის, ასახავს ფონს ელემენტის შიდა საზღვრებზე, რომელსაც აქვს hasLayout თვისებების ნაკრები. თუ ელემენტს არ აქვს hasLayout, ფონის სურათის თვისება პატივს სცემს ელემენტის საზღვრებს, როგორც ეს მითითებულია სპეციფიკაციაში. ჩვენების განსხვავება შესამჩნევი იქნება, თუ საზღვრები წყვეტილი ან წერტილოვანია და არა მყარი.
თუ ელემენტი დაყენებულია გადახვევაზე ან ავტომატურზე, Internet Explorer 8-ს ექნება ერთი პიქსელიანი ვერტიკალური შეფერხება ფონის გადახვევისას.
Internet Explorer 7.0-მდე და მათ შორის ვერსიები არ უჭერს მხარს მემკვიდრეობის მნიშვნელობას.
თუ ფონი დაყენებულია ცხრილის მწკრივზე (ტეგი
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
ამ მაგალითის შედეგი Chrome ბრაუზერში ნაჩვენებია ნახ. 1. Internet Explorer, Opera და Firefox ბრაუზერები სწორად აჩვენებენ ხაზის ფონი (ნახ. 2).
ბრინჯი. 1. გაიმეორეთ ფონი თითოეული უჯრედისთვის
ბრინჯი. 2. ფონი მთელი ხაზისთვის
ვფიქრობ, არ არსებობს არც ერთი საიტი, სადაც ქონება არ არის გამოყენებული CSS ფონი. როგორც ჩანს, რა შეიძლება იყოს უფრო მარტივი, ვიდრე ეს ქონება? მაგრამ არა, მისი შესაძლებლობები ბევრად უფრო ფართოა, ვიდრე ჩვეულებრივი სურათის ან ფერის მინიჭება გვერდის ფონის სახით. ზოგიერთი რამ ნაცნობი იქნება, ზოგი კი ალბათ ახალი იქნება ბევრისთვის. ნებისმიერ შემთხვევაში, სასარგებლო იქნება იმის ცოდნა, თუ როგორ მუშაობს ფონი.
CSS3-მა ბევრი ახალი რამ შემოიტანა საკუთრებაში, როგორიცაა გამჭვირვალობა და რამდენიმე სურათის ფონად მინიჭება, მაგრამ ამაზე ქვემოთ ვისაუბრებთ, მაგრამ ჯერ განვიხილავთ ქონების საფუძვლებს. ფონი.
ფონის ფერი
დარწმუნებული ვარ, რომ თქვენ უკვე არაერთხელ მიანიჭეთ ფონის ფერი. ეს შეიძლება გაკეთდეს რამდენიმე ტიპის აღნიშვნის გამოყენებით: რეგულარული (გამოიყენება ფერის სახელი), თექვსმეტობითი ან RGB ნოტაცია. თითოეული ტიპი ექვივალენტურია, გამოიყენეთ ის, რაც მოგწონთ საუკეთესოდ. მე ვცდილობ გამოვიყენო უმოკლეს ვარიანტი და უფრო ადვილი აღქმისთვის, მიღებული სტილის ფაილი ოდნავ მცირე ზომისაა.
P (ფონის ფერი: წითელი;) p (ფონის ფერი: #f00;) p (ფონის ფერი: #ff0000;) p (ფონის ფერი: rgb(255, 0, 0;))
CSS3 მხარს უჭერს გამჭვირვალობას, ასე რომ, ჩვენ შეგვიძლია დავამატოთ ის ჩვენს ფერში, მაგალითად ასე:
P (ფონის ფერი: rgba(255, 0, 0, 0.5);)
ბოლო ფიგურამ გამჭვირვალობა 50%-მდე დაადგინა. თქვენ შეგიძლიათ დააყენოთ გამჭვირვალობის მნიშვნელობა 0-დან (სრულიად გამჭვირვალე ფონი) 1-მდე (სრულიად გაუმჭვირვალე).
ფონის სურათი
ეს თვისება ასევე გამოიყენება ძალიან ხშირად; ის საშუალებას გაძლევთ მიაკუთვნოთ სურათი ფონზე. CSS3-მა დაამატა მრავალი სურათის ფონზე მინიჭების შესაძლებლობა, თითოეული ქმნის საკუთარ ფენას, ასე რომ ყოველი შემდეგი გადაფარავს წინას. რატომ შეიძლება იყოს ეს სასარგებლო? ყველაფერი საკმაოდ მარტივია - დავუშვათ, რომ თქვენ უნდა ჩააწყოთ პატარა ნაჭრები საიტის თითოეულ კუთხეში. მეტ-ნაკლებად რეზინის განლაგების გათვალისწინებით, ერთი სურათის გამოყენება არ არის ვარიანტი. მაშასადამე, ვაკეთებთ 4 „ფენას“, გადავიტანთ თითოეულ სურათს თავის კუთხეში და სულ ეს არის, პრობლემა მოგვარებულია.
ტექსტი (ფონური სურათი: url("image1"), url("image2"), url("image3"))
თუ თქვენ გჭირდებათ ერთი სურათის მინიჭება ფონზე, ჩვენ ვტოვებთ მხოლოდ პირველს კოდში, ვფიქრობ, ეს გასაგებია.
ნებისმიერი სურათის ფონად გამოყენებისას უნდა გახსოვდეთ ორი წესი:
- დააყენეთ კონტრასტული ფონის ფერი, თუ მომხმარებელი რაიმე მიზეზით ვერ ხედავს სურათს. მას შეუძლია უბრალოდ გამორთოს სურათების ჩვენება, დაზოგოს ტრაფიკი.
- არ გამოიყენოთ ფონის სურათი რაიმე მნიშვნელოვანი ინფორმაციის გადასაცემად. ზემოთ ჩამოთვლილი მიზეზების გამო, მომხმარებელმა შეიძლება ვერ დაინახოს იგი.
მრავალი ფონის სურათის მხარდაჭერა საკმაოდ ფართოა. ყველა ბრაუზერი, თუნდაც IE8, მხარს უჭერს ამ თვისებას.
გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო. დღეს ჩვენ გადავხედავთ ხუთ CSS წესს, რომლებიც საშუალებას გაძლევთ დააყენოთ ფონი ნებისმიერი ელემენტისთვის Html-ში - ფონის პოზიცია (სურათი, გამეორება, ფერი, დანართი). ასევე, არ უნდა დაგვავიწყდეს აღვნიშნოთ ფონის შემადგენლობის წესი.
ამაში არაფერია რთული, მაგრამ არსებობს გარკვეული დახვეწილობა და ნიუანსი, რომელიც უნდა იცოდეთ მზა შაბლონის შესახებ (დაიმახსოვრეთ, რაც დაგეხმარებათ ნებისმიერი დიზაინის ყველა წვრილმანის გამოვლენაში).
კიდევ ერთხელ შეგახსენებთ, რომ ეს სტატია არის სერიის ნაწილი და უმჯობესი იქნება, თავიდანვე დავიწყოთ სტილის მარკირების შესწავლა, კერძოდ, სტატიით იმის შესახებ, თუ რა არის CSS და რაში გამოიყენება, შემდეგ კი მიჰყვეთ მოცემული თანმიმდევრობით. საცნობარო წიგნში. თუმცა, ნებისმიერ შემთხვევაში, ეს თქვენზეა დამოკიდებული, მაგრამ ახლა მოდით ვისაუბროთ ფონის დაყენებაზე.
ფერი, ფონის ფერი და ფონის სურათი
ჯერ ვნახოთ, როგორ დავაყენოთ Html ელემენტების ფერი Css ფერის წესები. სინამდვილეში, აქ ყველაფერი მარტივია. სინტაქსი სრულიად ნორმალურია და თქვენ შეგიძლიათ დააყენოთ ფერი იმის მიხედვით, თუ როგორ მოხდა ეს ჰიპერტექსტის მარკირების ენაზე. როგორც გახსოვთ, მოთავსებულია ჰეშის ნიშნის შემდეგ (ჰაში - „#fe35a3“), ან სამი ციფრის გამოყენებით, თუ პირველი ემთხვევა მეორის მნიშვნელობას, მესამე მეოთხეს და მეხუთე, შესაბამისად, მეექვსეს ( ფერის კოდი „#aa33ff“ შეიძლება მოკლედ დაიწეროს როგორც „a3f“).
ასევე, ფერები Html და Css კოდებში შეიძლება წარმოდგენილი იყოს სიტყვების სახით (მაგალითად, "წითელი"), მაგრამ ყველაზე ხშირად ეს არის თექვსმეტობითი კოდი, რომელიც გამოიყენება:
ფერი: #303
მაგალითად, მე გავაფერადე ეს პატარა აბზაცი იმავე ფერით, როგორც ზემოთ (#303). ახლა ის ოდნავ განსხვავდება ყველა სხვა აბზაცის ფერისგან (უფრო მუქი), რომელიც დაყენებულია #555-ზე WordPress თემის CSS ფაილში, რომელსაც მე ვიყენებ. მაგრამ ფერის გამოყენებით ფერის დაყენება საკმაოდ მარტივია, მაგრამ ფონზე ცოტა უფრო რთული იქნება.
Ისე, Css-ის ფონისთვისარსებობს ხუთი წესი, რომლებიც შეიძლება გაერთიანდეს ერთში, თუ სასურველია. მათი სანახავად, შეგიძლიათ გადახვიდეთ W3C სპეციფიკაციის მიმდინარე გვერდზე და მოძებნოთ ნებისმიერი სიტყვა ფონი:
- ფონის ფერი - ამ წესის გამოყენებით, თქვენ აყენებთ ფონის ფერს ნებისმიერი Html ელემენტისთვის. შეგიძლიათ გამოიყენოთ კოდი ან ჩრდილის სახელი, ე.ი. ყველაფერი ზუსტად იგივეა, რაც ფერის გამოყენებისას იყო.
ფონის სურათი - მასთან ერთად შეგიძლიათ გამოიყენოთ სურათი ფონად (მაგრამ აუცილებლად წაიკითხეთ ამის შესახებ, რადგან მძიმე სურათები ანელებს გვერდების ჩატვირთვას), რომლის გზაც მითითებული იქნება url () ფუნქციონალში.
თუ დააკვირდებით სპეციფიკაციას, ამას ნახავთ ფონის ნაგულისხმევი ფერინებისმიერი ელემენტი იქნება გამჭვირვალე (წესის ნაგულისხმევი მნიშვნელობა არის „ფონის ფერი: გამჭვირვალე“). მართალია, ელემენტებში ის არ იქნება გამჭვირვალე ნაგულისხმევად, რადგან ეს არის სისტემის ელემენტები და მათ შესახებ ყველაფერი განსხვავდება და განსხვავდება ჩვეულებრივი ჰიპერტექსტის მარკირების ენის ტეგებისგან.
ფონის ფერი დაყენებულია სტანდარტულად (თექვსმეტობითი კოდის ექვსი ან სამი ციფრი, ან სიტყვა):
ფონის ფერი: #FEFCDE
მაგალითად, ამ აბზაცის ფონი მითითებულია ფონის ფერის გამოყენებით, ზემოთ მოცემული ფერის კოდით.
დანარჩენი ოთხი CSS წესი ეხება მხოლოდ ფონის სურათს, რომელიც შეიძლება დაყენდეს ნებისმიერი Html ელემენტისთვის და, თუ სასურველია, ზუსტად განლაგდეს. რომელი გრაფიკული ფაილი იქნება გამოყენებული, შეიძლება დაზუსტდეს გამოყენებით ფონის სურათი.
თუ დააკვირდებით მარკირების ენის სპეციფიკაციას, დაინახავთ, რომ ფონის გამოსახულების ნაგულისხმევად არის „არცერთი“ (ანუ, სურათი არ გამოიყენება ფონისთვის). კარგად, თუ ეს მაინც გჭირდებათ, მაშინ url() ფუნქციონალში მოგიწევთ მიუთითოთ მისკენ მიმავალი გზა:
Background-image:url(https://site/image/comment_top_focus.gif);
მაგალითად, ამ პუნქტისთვის მე გამოვიყენე გრაფიკული ფაილი ფონით, რომლის გზაც ზემოთ არის აღწერილი. თქვენ ხედავთ, რომ ამ პუნქტისთვის გამოყოფილი მთელი ტერიტორია დაფარულია განმეორებადი სურათით, რომელიც ორიგინალში ასე გამოიყურება:
იმათ. როდესაც იყენებთ მხოლოდ ერთი ფონის გამოსახულების წესს, რომელიც მიუთითებს გრაფიკული ფაილის გზაზე, ეს იგივე სურათი გამრავლდება ვერტიკალურად და ჰორიზონტალურად, სანამ არ დაფარავს ვებ გვერდზე გამოყოფილ მთელ არეალს ამ კონკრეტული Html ელემენტისთვის (ჩვენს მაგალითში ეს იყო აბზაცი). Რატომ ხდება ეს?
Background-repeat - გაიმეორეთ ფონის სურათი
დიახ, რადგან ჩვენ არ დავაკონკრეტეთ რაიმე მნიშვნელობა CSS წესისთვის ფონი-გამეორება, რაც ნიშნავს, რომ მისთვის გამოყენებული იქნება ნაგულისხმევი მნიშვნელობა. სპეციფიკაციის დათვალიერებისას, აღმოვაჩენთ, რომ ეს მნიშვნელობა შეესაბამება "გამეორებას" (გაიმეორეთ სურათი ყველა ღერძზე). პასუხი ბუნებრივად მოვიდა.
ამიტომ, ფონური გამეორებით შეგვიძლია მართეთ ფონის სურათის გამეორება. ამ წესს შეიძლება ჰქონდეს მხოლოდ ოთხი მნიშვნელობა:
Background-position - ფონის განლაგება
ახლა ჩნდება კითხვა: შესაძლებელია თუ არა ფონის სურათის გადატანა არეალის ზედა მარცხენა კუთხიდან, რომელიც ზღუდავს ელემენტის ზომას. რა თქმა უნდა, შეგიძლიათ და ამ მიზნით ცალკე წესი არსებობს. ფონის პოზიცია:
CSS სპეციფიკაციის დათვალიერებისას, ცხადი ხდება, რატომ არის ფონის სურათი ნაგულისხმევად დაჭერილი Html ელემენტის არეალის ზუსტად ზედა მარცხენა კიდეზე. რადგან "0% 0%" არის ფონის პოზიციის წესის ნაგულისხმევი მნიშვნელობა.
კარგად, როდესაც ეს წესი აშკარად არ არის მითითებული ელემენტისთვის (როგორც ჩვენს შემთხვევაში), მაშინ ბრაუზერი ირჩევს მის მნიშვნელობას, რომელიც მიღებულია სპეციფიკაციაში ნაგულისხმევად (გაითვალისწინეთ, რომ კოორდინატთა ღერძები CSS-ში მოხსენებულია ზუსტად ზედა მარცხენა კიდიდან. ფართობის ელემენტის).
სპეციფიკაციებიდან ასევე ირკვევა, რომ ფონის სურათის განლაგების მიზნით, შეგიძლიათ გამოიყენოთ როგორც ფარდობითი (პროცენტები) ასევე აბსოლუტური მნიშვნელობები (მაგალითად, ). ასევე, შეგიძლიათ გამოიყენოთ სიტყვები, რომლებიც შეესაბამება გარკვეულ ციფრულ მნიშვნელობებს. მაგრამ პირველ რიგში.
ფონის სურათის პოზიციონირების დაყენებისას აბსოლუტური ერთეულების გამოყენებითფონის პოზიციაში შემდეგი პრინციპი გამოიყენება მისი საბოლოო პოზიციის დასადგენად:
იმათ. ბრაუზერი გამოთვლის მითითებულ ოფსეტებს X და Y ღერძების გასწვრივ იმ არეალის წარმოშობიდან, სადაც ობიექტი მდებარეობს თავად ამ სურათის საწყისამდე. მაგალითად, ამ აბზაცში მე განვათავსე ფონის სურათი ფონის პოზიციის მეშვეობით შემდეგი CSS წესების გამოყენებით:
Background-image:url(https://site/image/logo.png); ფონი-გამეორება:არა-გამეორება; ფონის პოზიცია:400px 25px;
გთხოვთ გაითვალისწინოთ, რომ ამ შემთხვევაში ის გასწორდება სანახავი არეალის ცენტრთან და არა ამ აბზაცებისთვის გამოყოფილი არეალის ცენტრთან. ცხადია, რომ სინამდვილეში ფონის სურათის ასეთი განთავსება ნაკლებად სავარაუდოა გამოყენებული.
თუმცა, თუ დააყენებთ ფონის ფიქსირებულ პოზიციას ისეთი ელემენტებისთვის, როგორიცაა Body ან Html (ანუ ტეგებში, რომლებიც მოიცავს მთელ ვებ გვერდს), მაშინ ეს სურათი ყოველთვის ხილული იქნება ხედვის პორტში და ეს არის ზუსტად CSS ფონის დანართის გამოყენება. ქონება თანამედროვე ბლოკის განლაგებით.
კიდევ არის კიდევ ასაწყობი წესი ფონი, რომელიც საშუალებას გაძლევთ დააკავშიროთ ზემოთ აღწერილი ხუთივე წესი ერთ ბოთლში. უფრო მეტიც, ხუთივე მნიშვნელობები კომბინირებულ ვერსიაში შეიძლება გამოყენებულ იქნას ნებისმიერი თანმიმდევრობით და ნებისმიერი რაოდენობით (ისინი უნიკალურია და ბრაუზერი არ აგრევს მათ ერთმანეთთან). ყველაფერი, რასაც ცალსახად არ აკონკრეტებთ, ბრაუზერის მიერ ჩაითვლება ნაგულისხმევ მნიშვნელობად.
პნგ) განმეორების გარეშე 50%;
ასაწყობი წესის მაგალითი გამოყენებულია ამ პუნქტზე სიცხადისთვის. ლამაზი არ გამოვიდა, მაგრამ ეს არ არის მთავარი. ეს პარაგრაფი იყენებს უცნაურ ყვითელ ფონის შევსებას და ასევე იყენებს Liveinternet ლოგოს სურათს, რომელიც გასწორებულია აბზაცის ცენტრში. იმიტომ რომ თუ ფონის მიმაგრების წესს არ აქვს მნიშვნელობა, მაშინ გამოიყენება გადახვევის მნიშვნელობა (ნაგულისხმევი).
თუ რომელიმე ელემენტისთვის გსურთ დააყენოთ მხოლოდ ფერის შევსება და არ შეგაწუხოთ ფონის სურათი, ამის ნაცვლად შეგიძლიათ ამის გაკეთება:
ფონის ფერი: #FEFCDE
დაწერე:
ფონი: #FEFCDE
იმის გამო, რომ ასაწყობი წესის ყველა სხვა მნიშვნელობა მიღებული იქნება ნაგულისხმევად და ეს არის ის, რაც გჭირდებათ.
Წარმატებას გისურვებ! მალე შევხვდებით ბლოგის საიტის გვერდებზე
შეიძლება დაგაინტერესოთ
სიის სტილი (ტიპი, სურათი, პოზიცია) - Css წესები Html კოდში სიების გარეგნობის მორგებისთვის როგორ დავაკონფიგურიროთ ცხრილების, სიების და სხვა Html ელემენტების ფონის ალტერნატიული ფერი საიტზე nth-child ფსევდო კლასის გამოყენებით 
პოზიცია (აბსოლუტური, ფარდობითი და ფიქსირებული) - Html ელემენტების განლაგების გზები CSS-ში (წესები მარცხნივ, მარჯვნივ, ზედა და ქვედა) 
ცურვა და გასუფთავება CSS-ში - ბლოკის განლაგების ხელსაწყოები 
პოზიციონირება Z-ინდექსის და CSS კურსორის წესის გამოყენებით მაუსის კურსორის შესაცვლელად 
Padding, Margin და Border - დააყენეთ შიდა და გარე ბალიშები CSS-ში, ასევე საზღვრები ყველა მხარისთვის (ზედა, ქვედა, მარცხნივ, მარჯვნივ) 
ჩვენება (ბლოკი, არცერთი, ჩასმული) CSS-ში - დააყენეთ Html ელემენტების ჩვენების ტიპი ვებ გვერდზე 
Css-ში პრიორიტეტები და მათი ზრდა მნიშვნელოვანი, სელექტორების, მომხმარებლის და ავტორის სტილის კომბინაციისა და დაჯგუფების გამო 
CSS - რა არის ეს, როგორ უკავშირდება კასკადური სტილის ფურცლები Html კოდს Style-ისა და Link-ის გამოყენებით 
Tag, class, Id და უნივერსალური სელექტორები, ასევე ატრიბუტების სელექტორები თანამედროვე CSS-ში
