ტექსტი სურათზე png ფორმატში.

ჩვენს მაღაზიაში ნახავთ ყველა სახის ყვავილს.

პოზიციით: აბსოლუტური; ადრე (ან შემდეგ) #main და იმავე სიმაღლეზე, როგორც #main , შემდეგ გამოიყენეთ background-image და opacity: 0.2; .

#main ( პოზიცია: შედარებითი; ) #main:after ( შინაარსი: ""; ჩვენება: დაბლოკვა; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ფონის სურათი: url(/wp-content/uploads/2010/11 /tandem.jpg); სიგანე: 100%; სიმაღლე: 100%; გამჭვირვალობა: 0.2; z-ინდექსი: -1; )

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

დააყენეთ გამჭვირვალობა css ფონისთვის

ასე რომ, ეს ყველაფერი კეთდება ძალიან მარტივად, ისეთი ფერადი ჩაწერის ფორმატის წყალობით, როგორიცაა rgba. თუ გრაფიკულ რედაქტორებთან მუშაობთ, ალბათ იცით, რომ rgb ფერის რეჟიმი დეკოდირებულია შემდეგნაირად: წითლის (წითელი), მწვანე (მწვანე) და ლურჯის (ლურჯი) პროპორცია. ასე რომ, rgba თითქმის იგივეა, დამატებულია მხოლოდ ერთი პარამეტრი - გამჭვირვალობა. ასე წერია:

ფონის ფერი: rgba (173, 57, 22, 0.5)

პირველ რიგში, ჩვენ პირდაპირ მივუთითებთ, რომ ფერს ვაყენებთ rgba რეჟიმში. შემდეგ ჩვენ მივუთითებთ სამი ძირითადი ფერის გაჯერების მნიშვნელობებს 0-დან 255-მდე, სადაც 255 არის უმაღლესი გაჯერება. მეოთხე პარამეტრი ჩვენი გამჭვირვალობაა. აქ მნიშვნელობა იწერება 0-დან ერთამდე. 1 არის სრულიად გაუმჭვირვალე ელემენტი, ხოლო 0 არის სრულიად გამჭვირვალე ელემენტი. შესაბამისად, თუ დააყენებთ 0-ზე, მაშინ ფონის ფერი საერთოდ არ ჩანს.

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

გამჭვირვალე ფონის მაგალითი

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

და ახლა მოდით დავაყენოთ იგივე შავი ფერი ბლოკზე, მაგრამ მიუთითოთ ის rgba ფერის ფორმატის გამოყენებით, ბოლო მნიშვნელობის მითითებით, როგორც 0.7, მაგალითად. გამოვა ასე:
ახლა ბლოკის ფონი გამჭვირვალეა და მის მეშვეობით ჩანს ფონის სურათი. ეს სურათი და ფონი მხოლოდ საილუსტრაციო მიზნებისთვისაა. როგორც გესმით, css ფონზე გამჭვირვალობა შეიძლება გამოგადგებათ, როდესაც გჭირდებათ ჩასმული ელემენტის ფონი, რათა გამოჩნდეს სხვა ფენებში მდებარე სხვა ფონის დაფარვის გარეშე.

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

CSS იყენებს გამჭვირვალობის თვისებას გამჭვირვალე ეფექტის შესაქმნელად.

IE8 და ადრინდელი ვერსიები მხარს უჭერენ ალტერნატიულ თვისებას - filter:alpha(opacity=x), სადაც "x"-ს შეუძლია მიიღოს მნიშვნელობა 0-დან 100-მდე, რაც უფრო მცირეა მნიშვნელობა, მით უფრო გამჭვირვალე იქნება ელემენტი.

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

სცადე »

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

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

სცადე »

ფონის გამჭვირვალობა

ელემენტის გამჭვირვალობის ორი შესაძლო გზა არსებობს: ზემოთ აღწერილი გამჭვირვალობის თვისება და RGBA ფონის ფერის მითითება.

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

ფერი: rgb(255,255,0); ფერი: rgb(100%,100%,0);

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

RGBA ფერის დეკლარაცია სინტაქსით მსგავსია RGB სტანდარტული წესების. თუმცა, სხვა საკითხებთან ერთად, ჩვენ უნდა გამოვაცხადოთ მნიშვნელობა, როგორც RGBA (RGB-ის ნაცვლად) და დავაყენოთ დამატებითი ათობითი გამჭვირვალობის მნიშვნელობა ფერის მნიშვნელობის შემდეგ 0.0 (სრულიად გამჭვირვალე) და 1 (სრულიად გაუმჭვირვალე) შორის.

ფერი: rgba(255,255,0,0.5); ფერი: rgba(100%,100%,0,0.5);

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

ტექსტი ( ფონის სურათი: url(img.jpg); ) .prim1 ( სიგანე: 400 პიქსელი; ზღვარი: 30 პიქსელი 50 პიქსელი; ფონის ფერი: #ffffff; კონტური: 1 პიქსელი მყარი შავი; შრიფტის წონა: თამამი; გამჭვირვალობა: 0.5; ფილტრი : alpha(გაუმჭვირვალობა=70); /*IE8-ისთვის და უფრო ადრე*/ ტექსტის გასწორება: ცენტრში; ) .prim2 (სიგანე: 400 პიქსელი; ზღვარი: 30 პიქსელი 50 პიქსელი; ფონის ფერი: rgba(255,255,255,0.5); კონტური: 1px მყარი შავი; შრიფტის წონა: თამამი; ტექსტის გასწორება: ცენტრში; ) სცადეთ »

შენიშვნა: RGBA მნიშვნელობები არ არის მხარდაჭერილი IE8-ში და უფრო ადრე. ძველი ბრაუზერებისთვის, რომლებიც არ უჭერენ მხარს ფერთა მნიშვნელობებს ალფა არხებით დასაბრუნებელი ფერის გამოსაცხადებლად, ჯერ მიუთითეთ ის RGBA მნიშვნელობის წინ: ფონი: rgb(255,255,0); ფონი: rgba(255,255,0,0.5);