s პოზიცია: აბსოლუტური; ადრე (ან შემდეგ) #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;

მკაფიო ფონის შექმნა HTML და CSS-ში (გაუმჭვირვალობა და RGBA ეფექტები)

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

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

მოდით შევხედოთ კონტრასტს ტექსტსა და ფონს შორის – როგორ გამოვიყენოთ ის სწორად ვებსაიტის დიზაინში:

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

HTML 5 CSS 3 IE 9

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

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

Napivprozor tlo HTML 5 CSS 3 IE 9

ფონისთვის ბუნდოვანი მნიშვნელობა დაყენებულია 90%-ზე - ნათელი ფონი და ბუნდოვანი ტექსტი.

ვლად მერჟევიჩი

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

PNG Yak ფონი

გრაფიკული რედაქტორი ჯერ ამზადებს მონოქრომატულ, ამაღელვებელ პატარა სურათს, რომელიც ინახება PNG-24 ფორმატში (ნახ. 1). ამ ფორმატის თავისებურება არის ხილვადობის 256 დონის მხარდაჭერა, ან, უბრალოდ, აშკარად, შესაძლებელია სურათების ჩვენება.

ბრინჯი. 1. სურათი ფონისთვის

რის შემდეგაც ჩვენ ვამატებთ პატარებს ფონის დენის საშუალებით, როგორც ეს ნაჩვენებია დანართ 1-ში.

მაგალითი 1. ნათელმხილველი პატარას ვიკორასტანნია

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ამ კონდახის წაკითხვის შედეგი ნაჩვენებია ნახ. 3.

ბრინჯი. 2. Zastosuvannya ფონის სურათი

ძველი ბრაუზერი Internet Explorer 6 არ მუშაობს კარგად PNG-24-ში, რადგან რატომღაც საჭიროა ამ ბრაუზერის მხარდაჭერა, რომელსაც მოუწევს სკრიპტების ვიკორიზაცია.

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

ხშირად დააწკაპუნეთ სურათებზე

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

ბრინჯი. 3. უფრო დიდი რქიანი პატარები

ღერძი ჰგავს მწვანეს (სურ. 4).

ბრინჯი. 4. გამჭრიახობის იმიტაცია

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

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

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

კონდახი 2. Vikoristannya გაუმჭვირვალობა

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

კონდახის შედეგი ნაჩვენებია ნახ. 5.

ბრინჯი. 5. ტექსტის და ფონის გავრცელება

Internet Explorer-ში 8.0 ვერსიამდე, გამჭვირვალობა არ მუშაობს, ამიტომ ფილტრის სიმძლავრე სპეციფიკურია თქვენი ბრაუზერისთვის. რა თქმა უნდა, ეს გამოიწვევს არასწორ CSS კოდს.

RGBA

მიმდინარე მიდგომა ბევრად უფრო მარტივი და მოწინავეა, ვიდრე სხვა მეთოდების უმეტესობა და იყენებს ფერების და ფონის არჩევანს RGBA ფორმატში. პირველი სამი ასო კარგად არის ცნობილი და გაშიფრულია, როგორც წითელი, მწვანე, ლურჯი (წითელი, მწვანე, ლურჯი), დანარჩენი სიმბოლოა ალფა არხისა და ადგენს ელემენტის სიცხადეს. ჩაწერის ფორმატი შემდეგია.

ფონის ფერი: rgba(r, g, b, a);

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

ყველა ბრაუზერს არ აქვს ამ ფორმატის მხარდაჭერა: Internet Explorer ვერსია 9, Opera ვერსია 10, Firefox ვერსია 3, Safari ვერსია 3.2. სამწუხაროდ, დღევანდელი ბრაუზერები სწორად აჩვენებს ინსაიტს. IE-ს ძველი ვერსიებისთვის, შეგიძლიათ პირდაპირ მიუთითოთ ორიგინალის ფერი ახალი ფორმატისთვის და, რა თქმა უნდა, სიცხადე არ იქნება. წინააღმდეგ შემთხვევაში, მე სწრაფად დავუბრუნდები დენის ფილტრს, წინააღმდეგ შემთხვევაში მომიწევს შევეგუო იმ ფაქტს, რომ ინსაითი ასევე ხელს შეუშლის ტექსტს (მაგალითი 3). CSS კოდის მართებულობის უზრუნველსაყოფად, გამოვიყენებ რამდენიმე ჭკვიან კომენტარს.

კონდახი 3. Vikoristannya RGBA

HTML5 CSS3 IE Cr Op Sa Fx

კონდახის შედეგი ჩანს ნახ. 6.

ბრინჯი. 6. ნაპივპროზორი ბუნდოვანი ტექსტით

გაასწორეთ სურათი წინა სურათთან, ასოები გახდა უფრო ნათელი და ნათელი.

Internet Explorer 7-ს აქვს შეცდომა, როდესაც აერთიანებს ფონის ფერს სხვადასხვა მნიშვნელობებთან. მაგალითად, თუ ფონის ფერს დააყენებთ მუქ ლურჯზე, როგორც ეს ნაჩვენებია ქვემოთ, ფონი არ გამოჩნდება IE7-ში.

Div (ფონის ფერი: წითელი; /* არ არის ჩარჩენილი IE7-ში */ ფონის ფერი: rgba(255, 0, 0, 0.5); )

როგორც ჩანს, ეს ასე ხდება ფონის ფერის ფონით ჩანაცვლებით.

Div (ფონი: წითელი; /* და ეს მუშაობს */ ფონი: rgba(255, 0, 0, 0.5); ) თუმცა, აქ არის ერთი გაფრთხილება. CSS ვალიდატორი "იდევს" ფონზე, როდესაც თქვენ ანიჭებთ მას RGBA ფორმატის მნიშვნელობებს. ასევე სწორია მისი განთავსება ფონის ფერამდე. როგორც ყოველთვის, თქვენ უნდა აირჩიოთ ბრაუზერები და ვალიდობა.

Გამარჯობა ყველას. როგორც მოგეხსენებათ, ფონი არის 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-მდე). სხვადასხვა მნიშვნელობების დაწესებით, თქვენ შეგიძლიათ აირჩიოთ მილიონობით სხვადასხვა ფერი და ამავდროულად შეგეძლოთ საიტისთვის უამრავი ლამაზი ეფექტის მოფიქრება, საჭიროებისამებრ.