Ქონების css "გამჭვირვალობის" - მარტივი გზა, რათა საიტი უფრო საინტერესო დიზაინი

დღეს, შექმნა ვებ დიზაინი ხდება ხელოვნების ფორმით. ეს არ არის მხოლოდ კომპლექტი ელემენტების გარკვეული ფერის და ზომის, შრიფტები სხვადასხვა სტილის და თემატური ნახატები. იმისათვის, რომ თქვენს საიტზე განსხვავდება სხვა, მოზიდვა სია ყურადღებას და წარმართავს მას გარკვეული ელემენტები, გამოიყენება დიდი რაოდენობით მეთოდები და ინსტრუმენტები. მათ შორის არის ძალიან პოპულარული ქონება css - გამჭვირვალობას. ეს ტექნიკა არის საკმაოდ მოდური და glamorous, და, შესაბამისად, ხშირად არის გამოყენებული. Transparency შეუძლია სხვადასხვა ობიექტები საიტის გვერდები - ტექსტური ბლოკის ან მთელი სურათი, მაგალითად. იგი ასევე მიღწეული სხვადასხვა გზები. მოდი, ვნახოთ, მათ ქვემოთ.

პარამეტრები დააკონკრეტა ელემენტები გამჭვირვალობა

პარამეტრები რეგულირება გამჭვირვალობის ელემენტები რამდენიმე. ისინი გამოიყენება დამოკიდებულია კონკრეტული მიზნები, ისევე, როგორც ბრაუზერი, რომელსაც "მორგებული" დიზაინი. ესენია შემდეგი თვისებები:

• opacity;
• ფილტრი;
• PNG სურათი, როგორც ფონზე.

ქონების ღირებულების css "გამჭვირვალობის" შეიცვალა შემდეგნაირად: უმაღლესი ნომერი, ქვედა გამჭვირვალობა ელემენტს. ბუნდოვანება, იგი მერყეობს 0-დან 1, ფილტრი - 10 100. და ეს უკანასკნელი გამოიყენება Interet Explorer ბრაუზერი და ყველა სხვა შესაბამისი opacity ქონება.

Transparency Image (იცვლება)

დავიწყოთ ვარიანტი, რომელიც, როგორც ჩანს, გამჭვირვალე, როდესაც თქვენ გადატანა პუნქტის მიერ გადმოიყვანა მაუსის.

მოდი, განვიხილოთ, თუ როგორ უნდა განსაზღვროს გამჭვირვალობის image. CSS სთავაზობს ორი ვარიანტი. ამისათვის, თქვენ უნდა დარეგისტრირდეთ პირდაპირ კოდი html დოკუმენტი შემდეგი რედაქციით:

1. მიუთითეთ გზა იმიჯი.
2. ჩვენ განსაზღვრავს პარამეტრების გამჭვირვალობის როდესაც კურსორი არ არის. ამისათვის, ჩვენ ვიყენებთ თვისებები onmouseover და onmouseout, რომელიც განსაზღვრავს ღირებულება opacity, და ფილტრი.

იგივე მახასიათებლები, შეიძლება გათვალისწინებულ css დოკუმენტების და კოდის დაამატოთ მინიშნება იყო. შედეგები აღმოჩნდება იგივე.

გამჭვირვალობა ტექსტი და გვერდზე ბლოკები

რაც შეეხება ტექსტის ან ბლოკი (გამჭვირვალე div), css სთავაზობს თავის ვარიანტს, მსგავსი ქმნის გამჭვირვალე გამოსახულება, თქვენ უნდა გამოიყენოთ დაკავშირებული css ფაილი, რომელშიც სასურველი პარამეტრების მითითებული. შეგიძლიათ გადასვლა და მარტივი გზა. როდესაც თქვენ მითითებული სტილის ბლოკი div style ან ტექსტი p განსაზღვრონ შემდეგ HTML- კოდის onmouseover და onmouseout ელემენტებს. ორივე ვარიანტი მუშაობა და აწარმოოს სასურველი შედეგი.

გამჭვირვალობის მუდმივი

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

Css ელემენტია გამჭვირვალობის გადაეცემათ შემდეგ კოდი. ბლოკი div style განსაზღვრონ ღირებულებების ფონზე (მაგალითად, # ff8800), opacity (მაგალითად, 0.5) და სიგანის (სიგანე) და padding (padding).

იმიჯი კოდი ღირებულებები მიღების და opacity ფილტრი და მიუთითოთ გეზი გამოსახულება.

RGBA მეთოდი

არსებობს სხვა ვარიანტი ამ ქონებით სარგებლობა css გამჭვირვალობა შეიძლება იყოს გამოყენებული ფერის ნებისმიერი დიზაინის ელემენტს. იგი იყენებს RGBA მეთოდი. პირველი სამი ასო დავდგეთ ძირითადი ფერები (წითელი, დაშლა, ლურჯი), და ბოლო - alpha, რომელიც ადგენს გამჭვირვალობა. გამოყენება RGBA ფორმატში ითვალისწინებს გამჭვირვალობის, მიუთითებს ის, რომ ბოლო ციფრი. მაგალითად, როგორც: background: RGBA (240,2,33,0.4035).

დასკვნა

ამდენად, გამოყენებით, რა თქმა უნდა მუშაობა დიზაინი მარტივი, მაგრამ ეფექტური ფუნქცია css "გამჭვირვალობის", თქვენ შეგიძლიათ, რათა ის უფრო საინტერესო და უფრო შესამჩნევი ელემენტების მინიმალური ძალისხმევით. აღწერილი embodiments საბაჟო გამჭვირვალობის თვისებები დაგეხმარებათ ამ.