ფონის სურათი: | არცერთი; ფონის სურათი: | არცერთი | მემკვიდრეობა; ფონის სურათი: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | არცერთი

აღწერა

ფონის გამოსახულების თვისება(ინგლისურიდან "ფონის სურათი" - "ფონის სურათი") ადგენს ელემენტის ფონის სურათს.

შენიშვნა

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

Მოხმარების პირობები

დაწყებული CSS3– ით (გამოყოფილია მძიმეებით), შეგიძლიათ მიუთითოთ ერთდროულად რამდენიმე ფონის სურათი. ეს გახდის ქვედა ფონის სურათებს ხილული ზედა ფონის სურათების გამჭვირვალე უბნების მეშვეობით.

JavaScript

[object] .style .backgroundImage = "[მნიშვნელობა]";

ბრაუზერის მხარდაჭერა

სპეციფიკაცია

ღირებულებები

ყველა მნიშვნელობა CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

არცერთი არ აღნიშნავს ფონის სურათს. url ( ) განსაზღვრავს სურათის URI სტრიქონს "url (...)" შიგნით.

background-image: url (myImage.png);

Url (" ") განსაზღვრავს სურათის URI სტრიქონს" url (...) " - ში და URI სტრიქონი აღინიშნება" "" ორმაგი ციტატით.

background-image: url ("myImage.png");

მემკვიდრეობა მიუთითებს იმაზე, რომ ელემენტმა უნდა დაიმკვიდროს მშობლის ელემენტის პარამეტრები.

Საწყისი ღირებულება:"არცერთი".

გამოყენების მაგალითი

კოდების ჩამონათვალი

ფონის სურათი

დოკუმენტი მრავალი ფონის სურათებით.

> ფონის გამოსახულების თვისება>

ვებსაიტის დიზაინი იწყება ფონზე.

სწორი იქნება ფონის ფერის - თვისების განსაზღვრა ფონის ფერი, უსაფრთხოების ქსელისთვის, თუ სურათი არ იტვირთება. Ფრჩხილებში url ()მიუთითეთ გზა საქაღალდეში სურათებით.

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

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

როგორ გავხადოთ ფონი უფრო მიმზიდველი?

მადლობა ღმერთს, რომ ჩვენ გვყავს დამხმარეები ამისათვის:

• არ განმეორდეს- გამორთეთ გამეორება
• გამეორება-x- ნიმუშის გამეორება მხოლოდ ჰორიზონტალურად
• გამეორება-y- ნიმუშის გამეორება მხოლოდ ვერტიკალურად

Მაგალითად:

ბლოგის სათაური

ეს არის ფონის ტექსტურა, რომელიც მეორდება მხოლოდ ჰორიზონტალურად.

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

სათაური

მაგალითი არა განმეორებითი ფონის მოცემული პოზიციონირებით.

სურათი ნაჩვენებია მხოლოდ ერთხელ და მდებარეობს მარჯვნივ.

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

თუ გვინდა, რომ სურათი ყოველთვის ხილული იყოს ეკრანზე გადახვევისას, ჩვენ უნდა დავამატოთ თვისება ზემოთ მოცემულ კოდს - ფონური დანართი: ფიქსირებული;

რა განსხვავებაა მათ შორის imgდა ფონის სურათი?

განსხვავება არის ფუნდამენტური, ტეგი imgჩასმულია პირდაპირ სხეულში Html-გვერდები და პასუხისმგებელია შინაარსზე (ილუსტრაციები, ფოტოსურათები, ავატარები), ახორციელებს სემანტიკურ დატვირთვას. ძალიან მნიშვნელოვანია, რომ სურათი ინდექსირდეს საძიებო სისტემებით და მოხვდეს ძიების შედეგებში. Თვისებები CSS ფონის სურათი- გახადეთ საიტი უნიკალური და ლამაზი, ანუ ეს დიზაინი, რომელიც გარე ფაილში უნდა იყოს გადმოტანილი CSSსტილი ან გამოყენება ელემენტის შიგნით სტილი.

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

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

კარგად, ჩვენ განვიხილეთ მეტ -ნაკლებად ყველა ვარიანტი ქონების გამოყენებით CSS ფონის სურათი... მეტი ვარჯიში მეგობრებო! მოგერიდებათ კოპირება კოდი და ამუშავება თქვენი საკუთარი პარამეტრები!

მოკლე ინფორმაცია

CSS ვერსიები

ღირებულებები

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

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 ვერსიამდე და მათ შორის არ არის მემკვიდრეობითი მნიშვნელობის მხარდაჭერა.

თუ ფონი მითითებულია ცხრილის რიგისთვის (ტეგ ), შემდეგ Chrome, Safari, iOS არ აჩვენებენ მას, როგორც ეს მითითებულია სპეციფიკაციით, კერძოდ თითოეული უჯრედისთვის ცალკე. ვინაიდან ბრაუზერს უნდა აჩვენოს მყარი ფონი მთელი რიგისთვის. მაგალითი 2 გვიჩვენებს კოდს შეცდომის საჩვენებლად.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

ამ მაგალითის შედეგი Chrome ბრაუზერში ნაჩვენებია ნახ. 1. ბრაუზერი Internet Explorer, Opera და Firefox სწორად აჩვენებს ხაზის ფონს (სურ. 2).

ბრინჯი 1. თითოეული უჯრედის ფონის გამეორება

ბრინჯი 2. ფონი მთელი ხაზისთვის

მოკლე ინფორმაცია

CSS ვერსიები

ღირებულებები

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

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 ვერსიამდე და მათ შორის არ არის მემკვიდრეობითი მნიშვნელობის მხარდაჭერა.

თუ ფონი მითითებულია ცხრილის რიგისთვის (ტეგ ), შემდეგ Chrome, Safari, iOS არ აჩვენებენ მას, როგორც ეს მითითებულია სპეციფიკაციით, კერძოდ თითოეული უჯრედისთვის ცალკე. ვინაიდან ბრაუზერს უნდა აჩვენოს მყარი ფონი მთელი რიგისთვის. მაგალითი 2 გვიჩვენებს კოდს შეცდომის საჩვენებლად.

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, მხარს უჭერს ამ თვისებას.