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

შესაძლო მნიშვნელობები

სინტაქსური გაუმჭვირვალობის თვისება css- ში ასე გამოიყურება:

ამომრჩევი (opacity: 1;) selector (opacity: 0;) selector (opacity: 0.4;)

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

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

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

ბავშვის კვანძების გამჭვირვალობა

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

მშობელი (გაუმჭვირვალობა: 0.7;) ბავშვი (გაუმჭვირვალობა: 1;)

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

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

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

სამიზნე (ფონი: შავი; გაუმჭვირვალობა: 0,5;)

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

მაგალითი 2. გამჭვირვალობის დინამიური კონტროლი. სამიზნე ბლოკის CSS opacity თვისების მნიშვნელობა იცვლება მასზე გადაფურცვლისას.

სამიზნე (გაუმჭვირვალობა: 0.2;). მიზანი: hover (გაუმჭვირვალობა: 1;)

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

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

სკრიპტისგან გამჭვირვალობის მისაღებად საჭიროა მიმართოთ კონკრეტული ელემენტის სტილის ობიექტს.

// მიიღეთ მიმდინარე გაუმჭვირვალობა var opacity \u003d element.style.opacity; // დააყენეთ ახალი მნიშვნელობის element.style.opacity \u003d 0.4;

ბლოკის გაქრობა შეიძლება განხორციელდეს გარდამავალი CSS თვისების გამოყენებით:

ელემენტი (გაუმჭვირვალობა: 0.1; გარდამავალი: გაუმჭვირვალობა 1000ms;) ელემენტი: hover (გაუმჭვირვალობა: 0.8; გარდამავალი: opacity 2000ms;)

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

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

ალფა არხი გაუმჭვირვალობის ნაცვლად

CSS– ის გაუმჭვირვალე მექანიზმის ძირითადი დახვეწილობები:

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

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

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

Img1 (გაუმჭვირვალობა: 0.2;) .img2 (გაუმჭვირვალობა: 0.5;) .img3 (გაუმჭვირვალობა: 1.0;)

გამჭვირვალობის დასადგენად სკრიპტის გამოყენებით: object.style.opacity

ძველი თვისი Mozilla და Firefox 0.8 იყენებენ საკუთარ სახელს ამ თვისებისთვის: -moz-opacity სკრიპტის მეშვეობით გამჭვირვალეობის დასაყენებლად გამოიყენეთ: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - აგებულია KHTML ძრავაზე, გამოიყენეთ თვისება გამჭვირვალობის გასაკონტროლებლად: -khtml-opacity სკრიპტის მეშვეობით გამჭვირვალეობის დასაყენებლად გამოიყენეთ: object.style.KhtmlOpacity

Safari იყენებს CSS3 გაუმჭვირვალობას 1.2 ვერსიის შემდეგ, მაგრამ ვერსია 3.1-ზე ძველი Konqueror- მა, რომელმაც შეწყვიტა -khtml-opacity- ის მხარდაჭერა, CSS3 გაუმჭვირვალობის მხარდაჭერა არ შემოიღო.

Internet Explorer 5.5 ვერსიიდან და Internet Explorer 7-ის უახლეს ვერსიამდე ახორციელებს გამჭვირვალობას Alpha DirectX ფილტრის საშუალებით. უნდა აღინიშნოს, რომ ეს ფილტრი იყენებს გამჭვირვალობის მნიშვნელობას 0-დან 100-მდე (არა 0.0-დან 1.0-მდე). ასევე გაითვალისწინეთ, რომ ფილტრი შეიძლება გამოყენებულ იქნას მხოლოდ ელემენტზე, რომლის სიმაღლე ან სიგანე ან პოზიცია მითითებულია აბსოლუტურად, ან ჩაწერის რეჟიმი tb-rl მნიშვნელობით, ან შინაარსის რედაქტირება დაყენებულია სიმართლეზე.

მაგალითი (გამჭვირვალობის ნახევრად დაყენება):

Img1: დააყენეთ გამჭვირვალობა სკრიპტის საშუალებით, გამოიყენეთ: object.style.filter \u003d "progid: DXImageTransform.Microsoft.Alpha (პარამეტრის სტრიქონი)"

W3C- ს მსგავსი გამჭვირვალეობის მისაღებად გამოიყენეთ მნიშვნელობა "opacity \u003d რიცხვი 0-დან 100-მდე" პარამეტრის სიმებად.

როგორ გამოვიყენოთ იგი ყველა ბრაუზერში:

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

Javascript

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

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

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

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

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

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

HTML 5 CSS 3 IE 9

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

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

გამჭვირვალე ფონი HTML 5 CSS 3 IE 9

ფონის გაუმჭვირვალობა დადგენილია 90% - ნახევრად გამჭვირვალე ფონი და გაუმჭვირვალე ტექსტი.

აღწერა

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

Სინტაქსი

გაუმჭვირვალობა: მნიშვნელობა

ღირებულებები

მნიშვნელობა არის რიცხვი დიაპაზონიდან. 0 მნიშვნელობა შეესაბამება ელემენტის სრულ გამჭვირვალობას, ხოლო 1, პირიქით, მის გაუმჭვირვალობას. ფრაქციული რიცხვები, როგორიცაა 0.6, ადგენს გამჭვირვალობას. დასაშვებია რიცხვების დაწერა ნულოვანი ნულის გარეშე, ისევე როგორც გაუმჭვირვალეობა: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. ერთი

ნახ. 1. გაუმჭვირვალეობის გამოყენების შედეგი

ბრაუზერები

Firefox 3.5-მდე მხარს უჭერს არასტანდარტული -moz-opacity თვისებას.

Internet Explorer 9.0 ვერსიამდე იყენებს ფილტრებს გამჭვირვალობის შესაცვლელად, ამ ბრაუზერისთვის უნდა დაწეროთ ფილტრი: alpha (opacity \u003d 50), სადაც გაუმჭვირვალობის პარამეტრს შეუძლია მიიღოს მნიშვნელობა 0-დან 100-მდე.

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

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

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

სცადეთ "

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

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

სცადეთ "

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

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

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

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

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

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

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

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

კორპუსი (background-image: url (img.jpg);) .prim1 (სიგანე: 400px; მინდორი: 30px 50px; ფონის ფერი: #ffffff; საზღვარი: 1px მყარი შავი; შრიფტის წონა: მუქი; გამჭვირვალობა: 0.5; ფილტრი : alpha (opacity \u003d 70); / * IE8 და უფრო ადრე * / text-align: center;) .prim2 (სიგანე: 400px; მინდორი: 30px 50px; ფონის ფერი: rgba (255,255,255,0,5); საზღვარი: 1px მყარი შავი; შრიფტის წონა: სქელი; ტექსტის გასწორება: ცენტრი;) სცადე "

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