CSS ფონზე გამჭვირვალობას. გამჭვირვალე ფონზე ან ტექსტის CSS

მარხვის CSS3 ვებ დიზაინერებს მუშაობა მრავალმხრივ გახდა უფრო ადვილი და უფრო ლოგიკურია: მას შემდეგ, რაც ყველა, შეგიძლიათ ნამდვილად ლოგიკას ნებისმიერი სახის ობიექტი, ნაკლებად ხშირად მიმართავენ JavaScript. ვთქვათ თქვენ უნდა შეცვალოს გამჭვირვალობის ფონზე - CSS დაუყოვნებლივ გთავაზობთ რამდენიმე ვარიანტი.

Background განისაზღვრება ატრიბუტები (background-image, background-position , background ზომის, background-repeat, background-დანართი, background-წარმოშობის, background-კლიპი, background-color), რომელთაგან თითოეული შეიძლება დაეკისროს ცალკე ან კომბინირებული ქვეშ ატრიბუტი ფონზე. მოდი, ვნახოთ, თითოეული მათგანი დეტალურად.

ატრიბუტი ფონის ფერი

In CSS, ფონის ფერი შეიძლება მითითებული რამდენიმე გზა: გამოყენებით hex კოდი, ფერი სახელი ან RGB შესვლის. In CSS3 შესაძლებელი გახდა გამოიყენოთ ნაცვლად RGB ჩაწერა ვარიანტი RGBA.

Hex ფერი კოდი ჩაწერილია შემდეგ ქონების მესერის: background-color: # FFDAB9. თუ გმირები ამ ჩანაწერში იგივეა წყვილი, კოდი, როგორც წესი, პატარა cut: # ccff00 შეიძლება ჩაიწეროს როგორც # CF0:

სხეულის {background-color: # CF0 ;}.

სახელი, თუნდაც ყველაზე ეგზოტიკური ფერები. მაგალითად, გარდა სტანდარტული წითელი და თეთრი შეგიძლიათ გამოიყენოთ NavajoWhite (#FFDEAD) ან Honeydew2 (# E0EEE0):

სხეულის {background-color: purple; }.

ეს უკანასკნელი ვარიანტი არის RGB და RGBA შესვლის საშუალებას გაძლევთ მიუთითოთ არა მარტო ფერი, არამედ გამჭვირვალობის CSS ფონზე, მაგრამ მეთოდი მუშაობს მხოლოდ IE ვერსიები უფრო ძველი ვიდრე 9. სხვა ბრაუზერები აღიარებს ნორმალური ვერსია გამჭვირვალობა. მისი თქმით, W3C სტანდარტების სასურველია გამოიყენოთ მაინც RGBA ნაცვლად უფრო ჩვეულებრივი RGB.

ბოლო ღირებულების RGBA ფონზე და ადგენს opacity 0 (გამჭვირვალე) 1 (გაუმჭვირვალე).

არსებობს რამდენიმე უჩვეულო ღირებულებები. ფონის ფერი შეიძლება მითითებული გამოყენებით HSL და HSLA. ორივე დაემატა CSS3, და, შესაბამისად, არ არის მხარდაჭერილი IE ვერსია 9 ან უფრო მაღალი. განსახიერება იდენტური RGB და RGBA, მხოლოდ სხვადასხვა ფორმატში: Hue (shade - მნიშვნელობა ფერი საჭე, მოცემულია გრადუსი), იჟღინთება (ინტენსივობა - ფერის ინტენსივობის პროცენტებში, 0-დან 100), სიმსუბუქე (სიმსუბუქე - სინათლე, იზომება მსგავსად პარამეტრებით Saturate ).

ატრიბუტი ფონის სურათს

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

{Background-სხეულის გამოსახულება: url (bg1.png), url (bg2.png)}.

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

ატრიბუტი ფონზე პოზიცია

თუ თქვენ იყენებთ იმიჯი შექმნას ფონზე ერთეული, CSS საშუალებას გაძლევთ პოზიციონირება იმიჯი სადმე ეკრანზე. ჩვეულებრივ, სურათი მდებარეობს ზედა მარცხენა კუთხეში. ატრიბუტი იღებს ან სიტყვიერი ინსტრუქციების (ზედა, ქვედა, მარცხენა, მარჯვენა), რიცხვითი (ინტერესი, pixels და სხვა ერთეული). ამ შემთხვევაში, თქვენ უნდა მიუთითოთ ორი ღირებულებები, ჰორიზონტალური და ვერტიკალური:

სხეულის {background-position: მარჯვენა ცენტრი ;} - ამ მაგალითად, ნიმუში იქნება მდებარეობს მარჯვენა მხარეს გვერდი, ზედა და ქვედა გამოსახულების მანძილი იგივე.

ატრიბუტი ფონზე ზომის

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

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

ატრიბუტი ფონზე დანართი

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

• ფიქსირებული - ხდის სურათს ფონზე დაფიქსირდა;
• გადახვევა - ფონზე scrolls დანარჩენ ელემენტებს;
• ადგილობრივი - გამოსახულების ფონზე გრაგნილები თუ სენსორული შინაარსი. Background, რომელიც სცილდება შინაარსი არის განსაზღვრული.

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

სხეულის {background-დანართი ფიქსირებული}.

ამჟამად, Firefox მხარს არ უჭერს ბოლო ქონება (ადგილობრივი).

ატრიბუტი ფონზე წარმოშობის

ეს ატრიბუტი პასუხისმგებელია წესი ელემენტს. ადრეული ბრაუზერები მოითხოვს გამოყენების ინდექსები. ქონების თავად აქვს სამი პარამეტრი:

• padding-box მდგომარეობაში ნათესავი ზღვარზე ნიმუში, ხოლო იმის გათვალისწინებით, რომ სისქე ჩარჩო;
• სასაზღვრო-box თვისებები განსხვავდება წინა, რომ საზღვრის შეიძლება მთლიანად ან ნაწილობრივ გადახურვა ნიმუში;
• შინაარსი-box წესი სურათი pryavyazyvaya მისი შინაარსი.

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

ატრიბუტი background-repeat

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

• არ ვიმეორებ - იმიჯი, როგორც ჩანს, გვერდი ერთი ვერსია;
• ვიმეორებ - ფონზე მეორდება x და y;
• ვიმეორებ-x - მხოლოდ ჰორიზონტალურად;
• ვიმეორებ-y - მხოლოდ ვერტიკალურად;
• სივრცე - ფონზე მეორდება, მაგრამ თუ სივრცეში შეუძლებელია შეავსოთ შორის ნახატები ჩანს ცარიელი;
• რაუნდი - იმიჯი მასშტაბური, თუ იგი არ შეავსოთ მთელი ტერიტორია მთლიანად სურათები.

მაგალითი ატრიბუტები:

სხეულის {background-repeat: no- განმეორებითი განმეორებითი} - მსგავსი ფონზე განმეორებითი: გაიმეორეთ-y.

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

ატრიბუტი ფონზე clip

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

• padding-box - ფონზე ნაჩვენები ინტერიერი ბლოკი;
• სასაზღვრო-box - გამოსახულება მოდის ფარგლებში;
• შინაარსი-box - სურათის ფონზე მხოლოდ იმ ფარგლებში მობილურისთვის.

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

სხეულის {background-კლიპი: content- ყუთი;}.

Chrom და Safari მოითხოვს -webkit- პრეფიქსი.

Opacity ატრიბუტები და ფილტრი

opacity ატრიბუტი საშუალებას გაძლევთ მითითებული გამჭვირვალობის ფონზე - ცენტრის ქონება იმუშავებს ყველა ბრაუზერში. ღირებულება არის მერყეობს 0.0 1.0 ჩათვლით. ამ შემთხვევაში, თქვენ შეგიძლიათ დააყენოთ გამჭვირვალობის CSS ფონზე არსებობს მთელი ღირებულება ნაცვლად 0.3 არის საკმარისი დაწერა 3:

.ბლოკირება {background-image: url ( img.png); opacity: 3;}.

მითითებული ფონზე opacity, CSS არის შესაფერისი კი IE ქვემოთ მეცხრე ვერსია, გამოიყენოთ filter ატრიბუტი:

.ბლოკირება {background-image: url ( img.png); ფილტრი: Alpha (opacity = 30)}.

ამ შემთხვევაში, opacity ღირებულება არის 0 და 100. შენიშვნა, რომ opacity ანიჭებენ სხვადასხვა გამჭვირვალობის პარამეტრების მეშვეობით RGBA მემკვიდრეობა, როდესაც გამოყენებით opacity ირკვევა, არა მხოლოდ იმ ფონზე, არამედ ყველა იმ ელემენტების შიგნით ერთეული.

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