ზოგჯერ ფულის შოვნის საჭიროება ჩნდება პროზორის ფონიგვერდზე სასიმღერო ბლოკისთვის. ამ ეფექტის მიღწევა შესაძლებელია მხედველობითი არსებების მიერ ფონური ბავშვიფორმატში *.pngდა დააყენა იგი ძალაუფლების მეშვეობით ფონი: url(“./images/fon.png”);.

ვიკორისტის ძალა არის გაუმჭვირვალობა

არის ასეთი ნივთების დამზადება მე დაგეხმარები CSS-ში. მოდით შევქმნათ მთავარი ბლოკი გვერდზე ( გვერდი) და დანართების ბლოკი ( ბლოკი), რომელსაც მე ვაძლევ ინსაიტს. ბრაუზერის ჯვარედინი თავსებადობა მიიღწევა ასე: ძალაუფლებისთვის Internet Explorer – ფილტრი:ალფა(გაუმჭვირვალობა=50) (ხილვადობის მნიშვნელობები 0-დან 100-მდე დიაპაზონში), ბრაუზერებისთვის, რომლებიც მხარს უჭერენ CSS3 სტანდარტს – გამჭვირვალობა: 0.5 (რიცხვი 0.0-დან 1.0-მდე დიაპაზონში).

HTML კოდი:

შედეგი:

პროზორის ფონი ბლოკისთვის

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

პროზორის ფონი ბლოკისთვის

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

ვიკორისტების ავტორიტეტი ფონი-ფერი

ჩვენ უნდა შევიტანოთ გარკვეული ცვლილებები ცხრილში CSS სტილებიდა შეცვალეთ იგი ბლოკისთვის DIVკლასში ბლოკიძალა გაუმჭვირვალობაძალაუფლებისკენ ფონის ფერი.

Div.block ( სიგანე:260px; სიმაღლე:140px; margin-top:79px; margin-left:94px; საზღვარი:1px მყარი #333333; /* სუფთა ფონი მხოლოდ DIV.block */ background-color: rgba(255, 255 , 255, 0.5);/* სხეულის ფერი, გამჭვირვალობა 0.5*/ )

შედეგი:

პროზორის ფონი ბლოკისთვის

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

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

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

http://cp77.comxa.com/verstka/css-transparent-fon

CSS სიმძლავრე გაუმჭვირვალობაადგენს ელემენტის ბუნდოვანებას. სიცხადის ნაკლებობა ის ეტაპია, რომ ელემენტის ნაცვლად, სიცხადის ზომა.

ამ ინტერაქტიული აპლიკაციის წყარო დაინსტალირებულია GitHub საცავში. რას ფიქრობთ მათზე, პროექტის გაფართოების მიზნით, გაიმეორეთ კლონირება https://github.com/mdn/interactive-examples და გამოგვიგზავნეთ მოთხოვნა.

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

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

გამოიყენეთ იგი

ძირითადი მარაგი

div (ფონის ფერი: ყვითელი; ). ; /* ტექსტის ხილვადობა კიდევ უფრო ნათელია */ )

ბუნდოვანების აღზევება s:hover

img.გაუმჭვირვალობა ( გამჭვირვალობა: 1; ფილტრი: ალფა(გაუმჭვირვალობა=100); /* IE8 და ქვემოთ */ მასშტაბირება: 1; /* "hasLayout" ტრიგერები IE 7-ში და ქვემოთ */ ) img.გაუმჭვირვალობა:hover ( გამჭვირვალობა: 0..png" alt="MDN ლოგო" width="128" height="146" class="opacity"> !} !}

ხელმისაწვდომობის საკითხები

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

ფერის კონტრასტის კოეფიციენტი განისაზღვრება ტექსტის სიკაშკაშის გათანაბრებით მორგებული სიბნელისა და ფერის მნიშვნელობებით. ვებ კონტენტის ხელმისაწვდომობის ამჟამინდელი სახელმძღვანელო პრინციპების (WCAG) შესასრულებლად საჭიროა ტექსტისთვის 4.5:1 თანაფარდობა და უფრო დიდი ტექსტისთვის, როგორიცაა სათაურები, 3:1. დიდი ტექსტი ნაჩვენებია როგორც 18,66 პიქსელი ან მეტი, ან 24 პიქსელი ან მეტი.

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

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

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

ამ გვერდზე ცხრილის კომპაქტურობა გენერირებულია სტრუქტურირებული მონაცემებიდან. მას შემდეგ რაც გაიგებთ, რომ გაიგოთ თქვენი მონაცემების შესახებ, დააწკაპუნეთ https://github.com/mdn/browser-compat-data-ზე და გამოგვიგზავნეთ მოთხოვნა.

განაახლეთ თავსებადობის მონაცემები GitHub-ზე

	კომპ'იუტერი						მობილური
	Chrome	ზღვარი	Firefox	Internet Explorer	ოპერა	Safari	ანდროიდის ვებ-ხედვა	Chrome Android-ისთვის	Firefox ანდროიდისთვის	ოპერა ანდროიდისთვის	Safari iOS-ზე	სამსუნგის ინტერნეტი
გაუმჭვირვალობა	Chrome Სრული დახმარება 1	ზღვარი Სრული დახმარება 12	Firefox Სრული დახმარება 1 Სრული დახმარება 1 მხარდაჭერა არ არის 1 - 3.5 პრეფიქსით პრეფიქსით გამყიდველის პრეფიქსია: -moz-	ი.ე. Სრული დახმარება 9	ოპერა Სრული დახმარება 9	Safari Სრული დახმარება 2 Სრული დახმარება 2 მხარდაჭერა არ არის 1.1 - 2 პრეფიქსით პრეფიქსით გამყიდველის პრეფიქსია: -khtml-	WebView Android Სრული დახმარება 1	Chrome Android Სრული დახმარება 18	Firefox Android Სრული დახმარება 4	ოპერა ანდროიდი Სრული დახმარება 10.1	Safari iOS Სრული დახმარება 1	Samsung ინტერნეტ Android Სრული დახმარებაᲘსე
პროცენტული გამჭვირვალობის მნიშვნელობების მხარდაჭერა	Chrome Სრული დახმარება 78	Edge არ არის მხარდაჭერა No	Firefox Სრული დახმარება 70	IE არ არის მხარდაჭერა No	ოპერის მხარდაჭერა არ არის	Safari მხარდაჭერის გარეშე No	WebView Android Სრული დახმარება 78	Chrome Android Სრული დახმარება 78	Firefox Android არ არის მხარდაჭერა არა	Opera Android არ არის მხარდაჭერილი	Safari iOS-ის მხარდაჭერა არაა	Samsung Internet Android არ არის მხარდაჭერა No

ლეგენდა

Სრული დახმარებაᲡრული დახმარება არანაირი მხარდაჭერაარანაირი მხარდაჭერა vikoristan-ისთვის საჭიროა გამყიდველის პრეფიქსი ან სხვა სახელი. vikoristan-ისთვის საჭიროა გამყიდველის პრეფიქსი ან სხვა სახელი.

ავტორიტეტი CSS 3 გაუმჭვირვალობასაშუალებას გაძლევთ იმუშაოთ საიტის სხვა ელემენტებზე.

ელემენტის ხილვადობის დონე განისაზღვრება ფორმის მნიშვნელობებით 0 ადრე 1 დე 0 - ჩახედვას მოვიტან და 1 - სრულიად ბრმა. ასე რომ, მაგალითად, ამას აქვს მნიშვნელობა 0.5 ძალა გაუმჭვირვალობა zastosovanogo სანამ სურათი არ არის მნიშვნელოვანი ეს არის სურათიშეიძლება შეგვახსენოს.

Serendipity IE-ში

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

ფილტრი: ალფა (გაუმჭვირვალობა=50)

მნიშვნელობა გაუმჭვირვალობა Internet Explorer ბრაუზერის ფილტრი შეიძლება შეიცვალოს 0 - მე მოვიყვან რისთვისაც 100 - გამჭრიახობის ნაკლებობა

ამ მენიუს ბლოკები, კურსორთან ერთად გადატანისას, აშკარად ჩანს IE-ში!!

გოლოვნა
საიტის რუკა
იყიდე სპილო
გაყიდე სპილო
იქირავე სპილო

პრეფიქსი.

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

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

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

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

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

ამ და სხვა მიზეზების გამო ბრაუზერები იყენებენ ავტორიტეტებზე დაფუძნებულ პრეფიქსებს, რომლებიც არ შეესაბამება ოფიციალურ სპეციფიკაციებს. თითოეულ ბრაუზერს აქვს საკუთარი პრეფიქსი, რომელიც იწყება ნიშნით „-“, რაც სიმძლავრის ნიშანია, ხოლო ნიშანი „_“, CSS 2.1 სპეციფიკაციის მიხედვით, ნიშნავს, რომ ენერგია დაცულია CSS ბრაუზერის გაფართოებებისთვის iv.

ყველაზე პოპულარული ბრაუზერები და მათი პრეფიქსები:

ბრაუზერი	პრეფიქსი
ოპერა	-ო-
Firefox, SeaMonkey, Camino	-მოზ-
Internet Explorer 8 და უფრო მაღალი	-ქალბატონი-
Safari 3 ვერსიამდე, Konqueror	-khtml-
Safari 3 და უფრო მაღალი, Google Chrome	-ვებ ნაკრები-

მარტივია პრეფიქსების შექმნა CSS-ის ავტორიტეტის მიღებით და საჭირო პრეფიქსის შეტანით, მაგალითად, ავტორიტეტისთვის. გაუმჭვირვალობაჩანაცვლებული -მოზ-გამოდი: -moz-გაუმჭვირვალობა

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

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

ამ თავამდე serendipity-ის შესახებ, უნდა აღინიშნოს, რომ Firefox 3.5 ბრაუზერი გაცილებით დიდია ადრეული ვერსიები vikoristavuyut მათი ძალა -moz-გაუმჭვირვალობა, ა Safari ბრაუზერი 1.1 ვერსიამდე, vikoryst-ის სიმძლავრე აღდგება -khtml-გაუმჭვირვალობა .

ასე რომ, იმისათვის, რომ ჩვენი კონდახი ჯვარედინი ბრაუზერით იმუშაოს, ჩვენ უნდა დავამატოთ კიდევ რამდენიმე სტრიქონი კოდს:

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

კარგი, ახლა გთხოვთ კენკრა.

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

/* 06.07.2006 */

CSS გამჭვირვალობა (css გამჭვირვალობა, ჯავასკრიპტის გამჭვირვალობა)

გამჭრიახობის ეფექტი ამ სტატიის თემაა. როგორ იცით, როგორ გახადოთ HTML გვერდის ელემენტები CSS-ის ან Javascript-ის გამოყენებით და როგორ მიაღწიოთ ბრაუზერის ფუნქციონირებას (იგივე მუშაობს სხვადასხვა ბრაუზერში) Firefox ბრაუზერები, Internet Explorer, Opera, Safari, Konqueror, გთხოვთ. მანამდე, მოდით გადავხედოთ მზა გადაწყვეტილებებს ინსტალაციის ნაბიჯ-ნაბიჯ ცვლილებებისთვის JavaScript-ის გამოყენებით.

CSS გამჭვირვალობა

CSS გამჭვირვალობის სიმბიოზი

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

ფილტრი:progid:DXImageTransform.Microsoft.Alpha(გაუმჭვირვალობა=50); /* IE 5.5+*/ -moz-გაუმჭვირვალობა: 0.5; /* Mozilla 1.6 და ქვედა */ -khtml-გაუმჭვირვალობა: 0.5; /* Konqueror 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9*/

ფაქტობრივად, პირველი და ბოლო წესები საჭიროა IE5.5+-ისთვის და ბრაუზერებისთვის, რომლებსაც ესმით CSS3 გამჭვირვალობა და შუაში არსებული ორი წესი აშკარად არ უნდა იყოს კომპრომეტირებული, წინააღმდეგ შემთხვევაში მათ აღარ სცემენ პატივს (თქვენ თვითონ გადაწყვიტეთ რა გჭირდებათ).

Javascript გამჭვირვალობის სიმბიოზი

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

ფუნქცია setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) დაბრუნდება; // არ არსებობს ელემენტი განსაზღვრული ID-ით, ან ბრაუზერი არ უჭერს მხარს ხილვადობის ყველა ცნობილ ფუნქციას if (opacityProp=="ფილტრი") // Internet Exploder 5.5+ (nOpacity *= 100; // თუ ხილვადობა უკვე დაყენებულია, მაშინ ჩვენ მას ვცვლით ფილტრების კოლექციის მეშვეობით, ან ვამატებთ სიცხადეს style.filter-ის საშუალებით var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.ფილტრები.ალფა; თუ (oAlpha) oAlpha.გაუმჭვირვალობა = nგაუმჭვირვალობა; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+""); // სხვა ფილტრების გადაწერის თავიდან ასაცილებლად გამოიყენეთ "+=") სხვა // Სხვა ბრაუზერები elem.style=nგაუმჭვირვალობა; ) ფუნქცია getOpacityProperty() (if (document.body.style.opacity == "სტრიქონი") // CSS3 თავსებადი (Moz 1.7+, Safari 1.2+, Opera 9)დაბრუნება "გაუმჭვირვალობა"; else if (typeof document.body.style.MozOpacity == "სტრიქონი") // Mozilla 1.6 და უფრო ახალგაზრდა, Firefox 0.8დაბრუნება "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 დააბრუნებს "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ დააბრუნებს "ფილტრს"; დაბრუნება false; //გაცნობის გარეშე }

ფუნქცია იღებს ორ არგუმენტს: sElemId - ელემენტის id, nOpacity - მეტყველების რიცხვი 0.0-დან 1.0-მდე ადგენს CSS3 გამჭვირვალობის სტილს.

მე ვფიქრობ, რომ უმჯობესია ავხსნათ ზოგიერთი კოდი setElementOpacity ფუნქციისთვის, რომელიც შეესაბამება IE-ს.

Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.ფილტრები.ალფა; თუ (oAlpha) oAlpha.გაუმჭვირვალობა = nგაუმჭვირვალობა; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");

შეგიძლიათ უარი თქვათ საკვებზე, მაგრამ რატომ არ დააინსტალიროთ გავლენის გზა (=) power elem.style.filter = "..."; ? შესაძლებელია თუ არა "+="-ის გამოყენება დენის ფილტრის მწკრივის ბოლოს დასამატებლად? პასუხი მარტივია, ისე, რომ არ "გადაიწეროს" სხვა ფილტრები. თუმცა, თუ ამ გზით ფილტრს უეცრად დაამატებთ, ვერ შეცვლით ფილტრის მნიშვნელობის დაყენებამდე, არამედ უბრალოდ დაამატეთ იგი დენის ხაზის ბოლოს, რაც არასწორია. ამიტომ, თუ ფილტრი უკვე დაინსტალირებულია, საჭიროა მისი მანიპულირება ელემენტზე მიმაგრებული ფილტრების კოლექციით: elem.filters (წინააღმდეგ შემთხვევაში, თუ ფილტრი ჯერ არ არის მინიჭებული ელემენტზე, მაშინ შეუძლებელია მისი მანიპულირება. ეს კოლექცია). კოლექციის ელემენტებზე წვდომა შესაძლებელია ფილტრის სახელით ან ინდექსით. თუმცა, ფილტრი შეიძლება გამოყენებულ იქნას ორ სტილზე, მოკლე IE4 სტილზე ან IE5.5+ სტილზე, რომელიც შედის კოდში.

ელემენტის ხილვადობის გლუვი ცვლილება

გადაწყვეტილება მზად არის. ვიკორისტის ბიბლიოთეკის გამჭვირვალობა.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />

საფუძვლები:

1. ბიბლიოთეკას ვუკავშირებთ ფუნქციას;
2. რაც ნიშნავს ვიკორის მეთოდის წესებს fadeOpacity.addRule();
3. ვიკლიმოს მეთოდი fadeOpacity()შეცვალეთ გაღივება cob მნიშვნელობიდან ტერმინალურ მნიშვნელობამდე, ან fadeOpacity.back()მიუბრუნდა სიცხადის დონის კობ მნიშვნელობას.

როჟოვუჯემო

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

წესები იწერება შემდეგი მეთოდით fadeOpacity.addRule

Სინტაქსი: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

არგუმენტი:

• sRuleName - წესის სახელი, რომელიც მითითებულია;
• nStartOpacity და nFinishOpacity - cob და ბოლოს გახსნა, რიცხვები 0.0-დან 1.0-მდე დიაპაზონში;
• nDelay - დაყოვნება მილიწამებში (აუცილებელი არგუმენტი, გამოთვლის შემდეგ, 30-მდე).

თავად ხილვადობის გაქრობაზე დაწკაპუნება შესაძლებელია მეთოდების გამოყენებით fadeOpacity(sElemId, sRuleName), სადაც sElemId არის ელემენტის ID, ხოლო sRuleName არის წესის სახელი. გაგების გასაუმჯობესებლად შაბათ-კვირის ბანაკი FadeOpacity.back(sElemId) მეთოდი არის ვიკიპედია.

: ატარეთ ხილვადობის ადვილად შეცვლისთვის

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

გაითვალისწინეთ, რომ სურათი მოთავსებულია A ელემენტის შუაში. მარჯვნივ, რადგან Internet Explorer არის მე-6 ვერსიამდე, არის ფსევდო სელექტორი: hover, მხოლოდაბსოლუტურად ნათელია, რომ არ არსებობს ელემენტები, რომლებიც საჭიროა CSS-ის მიერ (სიტუაცია გამოსწორებულია IE7-ში).

ინსაითი და დაკბილული ტექსტი IE-ში

Windows XP-ის გამოშვებით, ეკრანის შრიფტები გამარტივდა ClearType, და ამავდროულად გვერდითი მოვლენები IE-ში ამ დამარბილებელი მეთოდის გამოყენებისას. ჩვენი აზრით, ელემენტის ხილვადობა ტექსტთან ერთად ჩართული მეთოდისთვის სტაგნაციაა ClearType გამარტივება, შემდეგ ტექსტი წყვეტს ნორმალურად ჩვენებას (მამატური ტექსტი - გაბედულიმაგალითად, ორი, განსხვავებული არტეფაქტი შეიძლება უბრალოდ გამოჩნდეს, მაგალითად, სურათის გარეგნობაში, დაკბილული ტექსტი). სიტუაციის გამოსასწორებლად, IE-სთვის თქვენ უნდა დააყენოთ ფონის ფერი, CSS სიმძლავრე ფონის ფერი, ელემენტი, რომლის მიმართაც გამჭრიახობა ჩერდება. საბედნიეროდ, IE7-ში არის შეცდომა.

წარმატებებს გისურვებთ, ვებ გეიკებს და ასევე ახალბედებს. მათთვის, ვინც არ მიჰყვება IT სფეროს ტენდენციებს, უფრო სწორედ ვებ მოდას, მინდა ნათლად გაცნობოთ, რომ ეს პუბლიკაცია ეძღვნება თემაზე: „როგორ მივიღოთ ინსაითი css ბლოკი„ინსტრუმენტები“ მხოლოდ თქვენზეა დამოკიდებული. როგორიც არ უნდა იყოს დაწინაურების ბედი სხვადასხვა ხედვის ობიექტების ონლაინ სერვისში, პატივს სცემენ ელეგანტურ ნაბიჯს.

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

მეთოდი 1. ანტიდილუვიური

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

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

მეთოდი 2. არ ინერვიულოთ

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

თუმცა, ეს მეთოდი არ არის მარტივი რამდენიმე მიზეზის გამო:

1. Internet Explorer 6 არ იყენებს ამ ტექნოლოგიას და მოითხოვს სკრიპტირების კოდს;
2. თქვენ არ შეგიძლიათ შეცვალოთ ფონის ფერი CSS-ში;
3. თუ თქვენს ბრაუზერში ჩართული გაქვთ გამოსახულების ჩვენების ფუნქცია, არ იცით.

მეთოდი 3. პროპარენიუმი

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

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

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

სხვა სიტყვებით რომ ვთქვათ, Internet Explorer ისევ „თავის თავზეა“ და 8 ვერსიამდეც კი არ ფუნქციონირებს გაუმჭვირვალობა.

ამ პრობლემის გადასაჭრელად გამოიყენეთ Vikorist ფილტრი:ალფა (გამჭვირვალობა = მნიშვნელობა).

მოდით შევხედოთ კონდახს.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

მეთოდი 4. Suchasny

დღევანდელი პროფესიონალები იყენებენ rgba (r, g, b, a) ინსტრუმენტს.

აქამდე გავიგე, რომ RGB არის ერთ-ერთი ყველაზე პოპულარული ფერის მოდელი, სადაც R წარმოადგენს წითელის ყველა ელფერს, G – მწვანეს და B – ცისფერ ფერებს.

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

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

rgba (r, g, b, a) იწყება:

• ოპერის 10 ვერსია;
• Internet Explorer 9;
• Safari 3.2;
• Firefox-ის 3 ვერსია.

მინდა შევამჩნიო მაგარი ფაქტი! Internet Explorer 7-ის ყველაზე ცხელი სიყვარული ხედავს შეწყალებას დაპყრობილი ხელისუფლებისთვის ფონის ფერიფერების სახელწოდებით (ფონი-ფერი: ოქრო). იმ ვარტო ვიკორისტუვატმა ჩამოართვა:

ფონის ფერი: rgba (255, 215, 0, 0.15)

ახლა კი კონდახი.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

გთხოვთ გაითვალისწინოთ, რომ ბლოკის ტექსტური შინაარსი მთლიანად არის მონიშნული (100% შავი), ხოლო ამოცანების ალფა არხის ფონი 0,88-ის ტოლია, მაშინ. 88%.

აქ მთავრდება გამოცემა. გამოიწერეთ ჩემი ბლოგი და არ დაგავიწყდეთ ჰკითხოთ მეგობრებს. გისურვებთ წარმატებებს თქვენს ახალ ვებ პროექტებში! ბუუ!