ავტორისგან:ყველას მივესალმები. ფონის ფერები და სურათები დიდ როლს ასრულებენ ვებ – დიზაინში, რადგან ისინი საშუალებას აძლევს ნებისმიერი ელემენტი იყოს უფრო მიმზიდველი. დღეს ჩვენ შევხედავთ თუ როგორ უნდა შექმნათ ფონი html- ში.
შესაძლებელია html- ით დალაგება ფონის დაყენებისას?
მაშინვე უნდა ვთქვა, რომ არა. საერთოდ html არ არის შექმნილი ვებ გვერდების სტილის შესაქმნელად. უბრალოდ ძალიან მოუხერხებელია. მაგალითად, არსებობს bgcolor ატრიბუტი, რომლითაც შეგიძლიათ დააყენოთ ფონის ფერი, მაგრამ ეს ძალიან მოუხერხებელია.
შესაბამისად, გამოვიყენებთ კასკადური სტილის ფურცლებს (css). ფონზე შექმნის კიდევ მრავალი შესაძლებლობა არსებობს. დღეს ჩვენ გავაანალიზებთ ყველაზე ძირითადებს.
როგორ დავაყენო ფონი css- ით?
ასე რომ, უპირველეს ყოვლისა, თქვენ უნდა გადაწყვიტოთ, რომელი ელემენტის დასადგენად გჭირდებათ ფონი. ეს არის ის, რომ ჩვენ უნდა მოვიძიოთ ის სელექტორი, რომელსაც დავწერთ წესს. მაგალითად, თუ საჭიროა ფონის დაყენება მთლიანი გვერდისთვის, მაშინ ამის გაკეთება შეგიძლიათ სხეულის ამორჩევის საშუალებით, ყველა ბლოკისთვის - div სელექტორის საშუალებით. კარგად და ა.შ. ფონზე შეიძლება და უნდა იყოს დაკავშირებული ნებისმიერი სხვა ამორჩევისთვის: სტილის კლასები, იდენტიფიკატორები და ა.შ.
მას შემდეგ რაც გადაწყვეტთ სელექტორს, უნდა დაწეროთ საკუთრების სახელი. ფონის ფერის დასაყენებლად (მხოლოდ მყარი ფერი, არა გრადიენტი ან სურათი), გამოიყენეთ ფონის ფერის თვისება. ამის შემდეგ, თქვენ უნდა დააყენოთ მსხვილი ნაწლავი და დაწეროთ ფერი თავად. ეს შეიძლება გაკეთდეს სხვადასხვა გზით. მაგალითად, საკვანძო სიტყვების, hex კოდის, rgb, rgba, hsl ფორმატის გამოყენებით. ნებისმიერი მეთოდი გააკეთებს.
ყველაზე ხშირად გამოყენებული მეთოდი არის თექვსმეტობითი კოდი. ფერის შესატყვისებლად შეგიძლიათ გამოიყენოთ პროგრამა, რომელშიც ფერის კოდი ჩანს. მაგალითად, ფოტოშოპი, საღებავი ან რაიმე ონლაინ ინსტრუმენტი. შესაბამისად, მაგალითად, მე დავწერ ზოგად ფონს მთელი ვებ – გვერდისთვის.
კორპუსი (ფონის ფერი: # D4E6B3;)
საჭიროა ამ კოდის ჩასმა სათაურის განყოფილებაში. მნიშვნელოვანია, რომ ფაილები იმავე საქაღალდეში იყოს.
სურათი, როგორც ფონი
მე გამოვიყენებ html ენის პატარა ხატულას, როგორც სურათი:
მოდით შევქმნათ ცარიელი ბლოკი იდენტიფიკატორით:
< div id = "bg" > < / div > |
მოდით მივცეთ მას აშკარა ზომა და ფონი:
#bg (სიგანე: 400px; სიმაღლე: 250px; background-image: url (html.png);)
#bg ( სიგანე: 400 პიქსელი; სიმაღლე: 250 პიქსელი; ფონი - სურათი: url (html. png); |
ამ კოდექსიდან ჩანს, რომ მე გამოვიყენე ახალი თვისება - background-image. ის განკუთვნილია მხოლოდ სურათის ჩასასმელად html ელემენტის ფონისთვის. ვნახოთ რა მოხდა:
სურათის დასადგენად, უნდა დაწეროთ მსხვილი ნაწლავის შემდეგ საკვანძო სიტყვა url და შემდეგ ფრჩხილებში მიუთითეთ ფაილის გზა. ამ შემთხვევაში, გზა მითითებულია იმ ფაქტის საფუძველზე, რომ სურათი იმავე საქაღალდეშია, როგორც html დოკუმენტი. თქვენ ასევე უნდა მიუთითოთ სურათის ფორმატი.
თუ თქვენ ეს გააკეთეთ, და ფონი კვლავ არ ჩანს ბლოკში, კვლავ შეამოწმეთ სწორად დაწერეთ თუ არა სურათის სახელი, თუ გზა და გაფართოება სწორად იყო მითითებული. ეს არის ყველაზე მეტად საერთო მიზეზებიფაქტი, რომ ფონი უბრალოდ არ ჩანს, რადგან ბრაუზერი ვერ პოულობს სურათს.
მაგრამ შეგიმჩნევიათ ერთი თავისებურება? ბრაუზერმა აიღო და გადაიღო სურათი მთელ ბლოკში. ასე რომ, რომ იცოდეთ, ეს არის ფონური სურათების ნაგულისხმევი ქცევა - ისინი იმეორებენ ვერტიკალურად და ჰორიზონტალურად, სანამ ბლოკში მოთავსდებიან. თქვენ მარტივად შეგიძლიათ აკონტროლოთ ეს ქცევა. ამისათვის გამოიყენეთ ფონზე განმეორებითი თვისება, რომელსაც აქვს 4 ძირითადი მნიშვნელობა:
გამეორება - ნაგულისხმევი მნიშვნელობა, სურათი მეორდება ორივე მხრიდან;
გამეორება-x - იმეორებს მხოლოდ ois x- სთვის;
გამეორება-y - იმეორებს მხოლოდ y- ღერძის გასწვრივ;
განმეორება - საერთოდ არ იმეორებს;
შეგიძლიათ დაწეროთ თითოეული მნიშვნელობა და ნახოთ რა ხდება. მე ასე დავწერ:
ფონის გამეორება: განმეორება-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% სიგანე და ნახევარი სიმაღლე. აქ მხოლოდ ერთი განმარტება უნდა გააკეთოთ - პროცენტულად ზომის დაყენებით, თქვენ შეგიძლიათ გავლენა იქონიოთ სურათის პროპორციებზე. ასე რომ, ფრთხილად იყავით, რომ პროპორციიდან არ გამოხვიდეთ.
როგორც ალბათ გამოიცნობთ, ფონის ზომა შეიძლება პიქსელებში იყოს მითითებული. ასევე არსებობს ორი მნიშვნელოვანი საკვანძო სიტყვა, რომელთა გამოყენებაც შეიძლება:
ყდა - სურათი მასშტაბირდება ისე, რომ მისმა მინიმუმ ერთმა მხარემ მთლიანად აავსოს ბლოკი.
შეიცავს - მასშტაბებს ისე, რომ სურათი მაქსიმალურად მოთავსდეს ბლოკში.
ამ მნიშვნელობების უპირატესობა ის არის, რომ ისინი არ ცვლიან სურათის ასპექტის თანაფარდობას, ტოვებენ მათ ერთნაირს.
ასევე, უნდა გესმოდეთ, რომ სურათის დაჭიმამ შეიძლება გამოიწვიოს მისი ხარისხის გაუარესება. მე შემიძლია მოვიყვანო მაგალითი განლაგების დიზაინერების ცხოვრებისა და რეალური პრაქტიკისგან. ყველამ იცის და ესმის, რომ სამუშაო მაგიდის კოდირებისას, საიტი უნდა მოერგოთ მონიტორების მთავარ სიგანეზე: 1280, 1366, 1920. თუ იღებთ ფონის სურათს, ვთქვათ, 1280 x 200 ზომით და არ დააყენებთ ეს არის ფონის ზომა, შემდეგ სიგანეები უფრო დიდია, ცარიელი ადგილი გამოჩნდება, სურათი არ შეავსებს სიგანეს მთლიანად.
99% შემთხვევაში, ეს ვებსაიტის შემუშავებას არ შეესაბამება, ამიტომ ის ადგენს ფონის ზომას: დაფარავს ისე, რომ სურათი ყოველთვის გადაჭიმული იყოს ფანჯრის მაქსიმალურ სიგანემდე. ეს კარგი ხრიკია გამოსაყენებლად, მაგრამ ახლა შეექმნა პრობლემა, რომ მომხმარებლებს, რომელთა ეკრანის სიგანე 1920 პიქსელია, ხედავენ არაოპტიმალური ხარისხის სურათს.
შეგახსენებთ, რომ ის გადაჭიმული იქნება მაქსიმალური სიგანეზე. შესაბამისად, ხარისხი ავტომატურად გაუარესდება. მხოლოდ სწორი გადაწყვეტილებაის თავდაპირველად გამოიყენებს უფრო დიდ სურათს - 1920 პიქსელის სიგანეზე. შემდეგ ფართო ეკრანებზე ის იქნება მისი ბუნებრივი ზომით, ხოლო დანარჩენებზე ის ნელა დაიჭრება, მაგრამ ამავე დროს, ფონის სურათის სწორად შერჩევით, ეს გავლენას არ მოახდენს საიტის იერსახეზე.
ზოგადად, ეს მხოლოდ 1 მაგალითია იმისა, თუ როგორ გამოიყენოთ ცოდნა, რომელიც მიიღეთ ამ სტატიაში, რეალური განლაგების შედგენისას.
ნახევრად გამჭვირვალე ფონი css- ით
კიდევ ერთი ხრიკი, რომლის განხორციელებაც შესაძლებელია css- ის გამოყენებით, არის ნახევრად გამჭვირვალე ფონი... ანუ, ამ ფონის საშუალებით შესაძლებელი გახდება იმის დანახვა, თუ რა იმალება მის უკან.
მაგალითისთვის, მთელ გვერდზე დავაყენებ როგორც ფონის სურათი, რომელიც ადრე გამოვიყენეთ მაგალითებში. ბლოკისთვის bg იდენტიფიკატორი, რომელზეც ვატარებთ ყველა ჩვენს ექსპერიმენტს, ჩვენ დავაყენებთ ფონს rgba ფერის ფორმატის გამოყენებით.
როგორც ადრე ვთქვი, css– ში მრავალი ფორმატია ფერების დასაზუსტებლად. ერთ-ერთი მათგანია rgb, საკმაოდ კარგად ცნობილი ფორმატი მათთვის, ვინც მუშაობს გრაფიკული რედაქტორები... ასე წერია: rgb (17, 255, 34);
ფრჩხილებში პირველი მნიშვნელობაა წითელი, შემდეგ მწვანე, შემდეგ ლურჯი ფერის გაჯერება. მნიშვნელობა შეიძლება იყოს რიცხვითი 0-დან 255-მდე. შესაბამისად, rgba ფორმატი არ განსხვავდება, მხოლოდ ერთი პარამეტრი ემატება - ალფა არხი. მნიშვნელობა შეიძლება იყოს 0-დან 1-მდე, სადაც 0 არის სრული გამჭვირვალობა.
მოგესალმებით ბლოგის საიტის ძვირფასო მკითხველს. დღეს ჩვენ განვიხილავთ CSS– ის ხუთ წესს, რომლებიც საშუალებას გაძლევთ Html– ში დააყენოთ ფონის ნებისმიერი ელემენტი - ფონის პოზიცია (სურათი, განმეორება, ფერი, დანართი). ნუ, არ უნდა დაგვავიწყდეს, რომ ვახსენოთ ფონის რთული წესიც.
ამაში რთული არაფერია, მაგრამ არსებობს გარკვეული დახვეწილობები და ნიუანსები, რომელთა ცოდნაც და უკვე გჭირდებათ მზა შაბლონი(გახსოვდეთ, რაც ხელს შეუწყობს ნებისმიერი დიზაინის ყველა ამონაწერის გახსნას).
კიდევ ერთხელ შეგახსენებთ, რომ ეს სტატია სერიის ნაწილია და უმჯობესი იქნება ჯერ სტილის მარკირების სწავლა დავიწყოთ, კერძოდ სტატიით იმის შესახებ, თუ რა არის CSS და რით არის ნაჭამი, შემდეგ კი მიჰყევით მოცემული თანმიმდევრობით მითითებაში. მართალია, ნებისმიერ შემთხვევაში, თქვენზეა დამოკიდებული, მაგრამ ახლა მოდით ვისაუბროთ ფონის ჩამოყალიბებაზე.
ფერი, ფონის ფერი და ფონის სურათი
ჯერ ვნახოთ როგორ html ფერიელემენტების გამოყენებით CSS ფერის წესები... სინამდვილეში, აქ ყველაფერი მარტივია. სინტაქსი სრულიად ნორმალურია და ფერის დაყენება შეგიძლიათ ჰიპერტექსტის ნიშნის ენაზე შესაბამისად. როგორც გახსოვთ, მოთავსებულია ჰეშის ნიშნის შემდეგ (ჰაში - "# fe35a3"), ან სამი ციფრის გამოყენებით, თუ პირველი ემთხვევა მეორის მნიშვნელობას, მესამე - მეოთხე, კარგად და მეხუთე, შესაბამისად, მეექვსე (ფერის კოდი "# aa33ff" შეიძლება შემოკლებული იყოს "a3f").
ასევე, Html და Css კოდებში ფერები შეიძლება წარმოდგენილი იყოს სიტყვებად (მაგალითად, "წითელი"), მაგრამ ყველაზე ხშირად გამოიყენება თექვსმეტობითი კოდი:
ფერი: # 303
მაგალითისთვის, მე ეს პატარა აბზაცი იმავე ფერის ფერი მაქვს, როგორც ზემოთ (# 303). ის ახლა ოდნავ განსხვავდება ყველა სხვა აბზაცის ფერისგან (მუქი), რომელიც დაყენებულია # 555 ინ CSS ფაილიჩემს მიერ გამოყენებული WordPress თემები... მაგრამ ფერის დაყენება ფერის საშუალებით საკმაოდ მარტივია, მაგრამ ფონით ცოტა უფრო რთული იქნება.
Ისე, ფონზე cssარსებობს ხუთი წესი, რომლებიც, თუ სასურველია, შეიძლება გაერთიანდეს ერთ გუნდში. მათი სანახავად შეგიძლიათ გადახვიდეთ W3C კონსორციუმის ამჟამინდელი სპეციფიკაციების გვერდზე და იქ მოძებნოთ რაიმე, რომელზეც არის სიტყვა Background:
- ფონის ფერი - ეს წესი ადგენს ფონის ფერს ნებისმიერი Html ელემენტისთვის. მასში შეგიძლიათ გამოიყენოთ კოდი ან ჩრდილის სახელი, ე.ი. ყველაფერი ზუსტად ისეა, როგორც ფერის გამოყენებისას.
ფონის სურათი - მასთან ერთად შეგიძლიათ გამოიყენოთ სურათი, როგორც ფონი (მაგრამ აუცილებლად წაიკითხეთ ამის შესახებ, რადგან მძიმე სურათები შეანელებს გვერდის ჩატვირთვას), რომლის გზა მითითებული იქნება url () ფუნქციონირებაში.
თუ სპეცს გადახედავთ, ამას დაინახავთ ნაგულისხმევი ფონის ფერინებისმიერი ელემენტი გამჭვირვალე იქნება (წესის სტანდარტული მნიშვნელობა არის "ფონის ფერი: გამჭვირვალე"). ამასთან, ელემენტებში ეს არ იქნება გამჭვირვალე სტანდარტულად, ვინაიდან ეს სისტემის ელემენტებია და მათ ყველაფერი განსხვავებულად აქვთ და განსხვავებულია ჰიპერტექსტის ნიშნის ენის ჩვეულებრივი ნიშნებისგან.
ფონის ფერის ფერი დაყენებულია როგორც სტანდარტული (ექვსკაციანი კოდის ექვსი ან სამი ციფრი, ან სიტყვა):
ფონის ფერი: # FEFCDE
მაგალითად, ამ აბზაცის ფონი ზუსტად განისაზღვრება ფონის ფერის საშუალებით, ზემოთ მოცემული ფერის კოდის საშუალებით.
დანარჩენი ოთხივე CSS წესი ვრცელდება მხოლოდ ფონის სურათზე, რომელიც შეიძლება დაყენდეს ნებისმიერი Html ელემენტისთვის და, თუ სასურველია, შეიძლება ზუსტად განლაგდეს. რომელი გრაფიკული ფაილი იქნება გამოყენებული, მისი დაყენება შესაძლებელია ფონი-სურათი.
თუ გადავხედავთ სტილის მარკირების ენის სპეციფიკაციას, ნახავთ, რომ ნაგულისხმევი ფონის სურათი არის "არცერთი" (ანუ არ გამოიყენება ფონის სურათი). თუ ეს ისევ გჭირდებათ, url () ფუნქციონალში უნდა მიუთითოთ მისკენ მიმავალი გეზი:
ფონის სურათი: url (https: //site/image/comment_top_focus.gif);
მაგალითად, ამ აბზაცისთვის გამოვიყენე გრაფიკული ფაილი ფონით, რომლის გზაც ზემოთ არის აღწერილი. თქვენ ხედავთ, რომ ამ აბზაცისთვის გამოყოფილი მთლიანი ტერიტორია დაფარულია განმეორებითი გამოსახულებით, რომელიც ორიგინალში ასე გამოიყურება:
იმ ფონის სურათის მხოლოდ ერთი წესის გამოყენებისას, რომელიც მიუთითებს გრაფიკული ფაილისკენ მიმავალ გზას, ეს სურათი გამრავლდება ვერტიკალურად და ჰორიზონტალურად, სანამ არ მოიცავს ამ კონკრეტულ Html ელემენტის ვებგვერდზე გამოყოფილ მთელს არეალს (ჩვენს მაგალითში, ეს იყო პუნქტი). Რატომ ხდება ეს?
ფონის გამეორება - გაიმეორეთ ფონის სურათი
დიახ, რადგან ჩვენ არ დავწერეთ რაიმე მნიშვნელობა CSS წესისთვის. ფონის გამეორება, რაც ნიშნავს, რომ ნაგულისხმევი მნიშვნელობა იქნება გამოყენებული მისთვის. სპეციფიკაციის დათვალიერებით, გავარკვიეთ, რომ ეს მნიშვნელობა შეესაბამება "განმეორებას" (სურათის გამეორება ყველა ღერძის გასწვრივ). პასუხი თავისთავად გავიდა.
ამიტომ, ფონზე განმეორებით შეგვიძლია ფონის სურათის გამეორებების მართვა... ამ წესს შეიძლება ჰქონდეს მხოლოდ ოთხი მნიშვნელობა:
ფონის პოზიცია - ფონის პოზიციონირება
ახლა იბადება კითხვა, შესაძლებელია თუ არა ფონის სურათის გადატანა ელემენტის ზომის შეზღუდვის ზონის ზედა მარცხენა კუთხიდან. რა თქმა უნდა შეგიძლიათ და ამ მიზნით ცალკე წესი არსებობს ფონის პოზიცია:
CSS სპეციფიკის გადახედვისას, ნათელი ხდება, თუ რატომ არის ნაგულისხმევი ფონის სურათი, რომელიც მდებარეობს Html ელემენტის არეალის ზედა მარცხენა კიდეზე. რადგან მნიშვნელობა "0% 0%" ნაგულისხმევია ფონის პოზიციის წესისთვის.
კარგად, როდესაც ეს წესი არ არის მკაფიოდ მითითებული ელემენტისთვის (როგორც ჩვენს შემთხვევაში), მაშინ ბრაუზერი ირჩევს მის მნიშვნელობას, რომელიც ნაგულისხმევად მიიღება სპეციფიკაციაში (გაითვალისწინეთ, რომ CSS– ში კოორდინატთა ღერძი იტყობინება ფართობის ელემენტი).
სპეციფიკაციიდან ჩანს, რომ ფონური სურათის პოზიციონირებისთვის შეიძლება გამოყენებულ იქნას როგორც ფარდობითი (პროცენტული), ასევე აბსოლუტური მნიშვნელობები (მაგალითად). ასევე, შეგიძლიათ გამოიყენოთ სიტყვები, რომლებიც შეესაბამება გარკვეულ რიცხობრივ მნიშვნელობებს. ჯერ პირველი.
ფონის სურათის პოზიციონირებისას აბსოლუტური ერთეულების გამოყენებითფონურ მდგომარეობაში ხდება მისი საბოლოო პოზიციის განსაზღვრის შემდეგი პრინციპი:
იმ ბრაუზერი გამოთვლის მითითებულ კომპენსაციებს X და Y ღერძების გასწვრივ იმ ადგილის წარმოშობიდან, რომელშიც ობიექტი განთავსებულია, ამ სურათის წარმოშობისგან. მაგალითად, ამ აბზაცში მე განვათავსე ფონის სურათი ფონური მდგომარეობის თვალსაზრისით შემდეგი CSS წესების გამოყენებით:
ფონის სურათი: url (https: //site/image/logo.png); ფონის გამეორება: განმეორება; ფონის პოზიცია: 400px 25px;
გთხოვთ გაითვალისწინოთ, რომ ამ შემთხვევაში ის გასწორდება ხედვის ცენტრისკენ და არა ამ პუნქტებისთვის გამოყოფილი ტერიტორიის ცენტრში. აშკარაა, რომ სინამდვილეში ფონის სურათის ასეთი განლაგება ნაკლებად სავარაუდოა.
ამასთან, თუ თქვენ დააყენეთ ფიქსირებული პოზიცია ელემენტებისთვის, როგორიცაა Body ან Html (მაგ., თეგებში, რომლებიც მთელ ვებგვერდს მოიცავს), მაშინ ეს სურათი ყოველთვის თვალსაჩინო იქნება თვალსაზრისით და ეს ზუსტად ისაა, რაც ფონზე მიმაგრებული CSS თვისებაა. პოულობს ბლოკის თანამედროვე განლაგებას.
კიდევ არის კიდევ რამე მზა წესის ფონი, რაც საშუალებას გაძლევთ დააკავშიროთ ზემოთ აღწერილი ხუთივე წესი ერთ ბოთლში. უფრო მეტიც, ასაწყობი ვერსიის ხუთივესთვის მნიშვნელობები შეიძლება გამოყენებულ იქნას ნებისმიერი თანმიმდევრობით და ნებისმიერი რაოდენობით (ისინი უნიკალურია და ბრაუზერი მათ ერთმანეთში არ აურევს). რასაც თქვენ პირდაპირ არ მიუთითებთ, ბრაუზერი ჩათვლის ნაგულისხმევი მნიშვნელობის ტოლფასად.
ფნგ) განმეორება 50%;
მაგალითში ნაჩვენები შეკრების წესი გამოიყენება ამ აბზაცზე სიცხადისთვის. აღმოჩნდა, რომ არ არის ლამაზი, მაგრამ ეს არ არის მთავარი. ამ აბზაცისთვის გამოიყენება უცნაური ყვითელი ფონის შევსება, აგრეთვე LiveInternet– ის ლოგოტიპი, რომელიც აბზაცის ცენტრშია გასწორებული. რადგან ფონის დანართის წესისთვის მნიშვნელობა არ არის მითითებული, შემდეგ გამოიყენება ნაგულისხმევი გადახვევის მნიშვნელობა.
თუ რომელიმე ელემენტისთვის გსურთ შეავსოთ მხოლოდ ფერი და არ აწუხებთ ფონის სურათი, მაშინ საკმაოდ მარტივად შეგიძლიათ ამის ნაცვლად:
ფონის ფერი: # FEFCDE
დაწერე:
ფონი: # FEFCDE
კომბინირებული წესის ყველა სხვა მნიშვნელობად მიიღება სტანდარტულად, და ეს არის ის, რაც გჭირდებათ.
Წარმატებას გისურვებ! ნახავთ მალე ბლოგის საიტის გვერდებზე
შეიძლება დაგაინტერესოთ
სიის სტილი (ტიპი, სურათი, პოზიცია) - CSS წესები პერსონალიზაციისთვის გარეგნობასიები html კოდში როგორ დააყენოთ სტრიქონების ალტერნატიული ფონის ფერი ცხრილებში, სიებში და სხვა HTML ელემენტებისაიტზე მე -9 ბავშვის ფსევდო კლასის გამოყენებით 
პოზიცია (აბსოლუტური, ფარდობითი და ფიქსირებული) - HSS HTML ელემენტების პოზიციონირების გზები CSS– ში (წესები მარცხნივ, მარჯვნივ, ზედა და ქვედა) 
მოძრავი და გასაგები CSS– ში - ბლოკის განლაგების ინსტრუმენტები 
პოზიციონირება Z- ინდექსისა და CSS კურსორის წესით მაუსის კურსორის შესაცვლელად 
Padding, Margin and Border - დაყენებულია CSS შიდადა გარე padding, ასევე საზღვრები ყველა მხარისთვის (ზედა, ქვედა, მარცხნივ, მარჯვნივ) 
ჩვენება (ბლოკი, არცერთი, შინაგანი) CSS– ში - დააყენეთ Html ელემენტების ჩვენების ტიპი ვებ – გვერდზე 
CSS პრიორიტეტები და გაძლიერება მნიშვნელოვანი, სელექტორთა კომბინაციითა და დაჯგუფებით, მორგებული და ავტორების სტილით 
CSS - რა არის ეს, როგორ უკავშირდება კასკადური სტილის ფურცლები HTML კოდისტილის და ბმულის გამოყენებით 
თანამედროვე CSS– ში ნიშნის, კლასის, ID– ს და ზოგადი ამომრჩეველთა, აგრეთვე ატრიბუტების ამორჩევა
მე ვფიქრობ, რომ არ არსებობს ერთი საიტი, სადაც ქონება არ არის გამოყენებული 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 ("სურათი 1"), url ("სურათი 2"), url ("სურათი 3"))
თუ თქვენ გჭირდებათ ერთი სურათის დანიშვნა ფონზე, კოდში მხოლოდ პირველს ვტოვებთ, ვფიქრობ, ეს გასაგებია.
არსებობს ორი წესი, რომელიც უნდა გახსოვდეთ ნებისმიერი სურათის ფონზე გამოყენებისას:
- დააყენეთ კონტრასტული ფონის ფერი იმ შემთხვევაში, თუ მომხმარებელი ვერ აჩვენებს სურათს რაიმე მიზეზით. მას შეუძლია გამორთოს ნახატების ჩვენება, გადაარჩენს ტრაფიკს.
- არ გამოიყენოთ ფონის სურათი ნებისმიერი გადმოსაცემად მნიშვნელოვანი ინფორმაცია... ზემოთ აღნიშნული მიზეზის გამო, მომხმარებელმა შეიძლება ვერ ნახოს იგი.
მრავალი ფონური სურათის მხარდაჭერა საკმარისად ფართოა. ყველა ბრაუზერი, თუნდაც IE8, მხარს უჭერს ამ თვისებას.
მოკლე ინფორმაცია
CSS ვერსიები
ღირებულებები
url გეზი გრაფიკული ფაილი, რომელიც მითითებულია url () კონსტრუქციის შიგნით. ამ შემთხვევაში, ფაილისკენ მიმავალი გზა შეიძლება ჩაიწეროს ბრჭყალებში (ორმაგი ან ერთჯერადი), ან მათ გარეშე. არცერთი არ აუქმებს ელემენტის ფონის სურათს. მემკვიდრეობით მიიღებს მშობლის მნიშვნელობას.HTML5 CSS2.1 IE Cr Op Sa Fx
ობიექტის მოდელი
document.getElementById ("elementID") .style.backgroundImage
ბრაუზერები
Internet Explorer 7.0 ან გვიან იყენებს ფონს იმ ელემენტის საზღვრის შიგნით, რომელსაც აქვს მითითებული თვისება Layout. თუ ელემენტს არ აქვს განლაგება, background-image თვისება პატივს სცემს ელემენტის საზღვრებს, როგორც ეს მითითებულია სპეციფიკაციაში. ეკრანის სხვაობა შესამჩნევი იქნება, თუ საზღვრები გაწყვეტილი ან წერტილოვანია, ვიდრე მყარი.
თუ ელემენტი გადაადგილდება ან ავტომატურად არის მითითებული, 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. ფონი მთელი ხაზისთვის
