| მაგალითი 3 BODY ( ფონი: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) არ განმეორდეს; ფონის ზომა: 100% ;) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) ჩვენს მაღაზიაში შეგიძლიათ იპოვოთ ყველა სახის ფერი.
გაითვალისწინეთ, რომ ბლოკის ტექსტის შინაარსი სრულად ჩანს (100% შავი), ხოლო ფონი დაყენებულია ალფა არხზე 0.88, ე.ი. 88%.
ეს პოსტი დასრულდა. გამოიწერეთ ჩემი ბლოგი და არ დაგავიწყდეთ თქვენი მეგობრების მოწვევა. წარმატებებს გისურვებთ ვებ ენების სწავლაში! Ნახვამდის!
/* 06.07.2006 */
CSS გამჭვირვალობა (css გამჭვირვალობა, ჯავასკრიპტის გამჭვირვალობა) გამჭვირვალობის ეფექტი არის ამ სტატიის თემა. თუ გაინტერესებთ როგორ გახადოთ html გვერდის ელემენტები გამჭვირვალე CSS-ის ან Javascript-ის გამოყენებით და როგორ მიაღწიოთ ბრაუზერს (იგივე სამუშაო სხვადასხვა ბრაუზერში) Firefox, Internet Explorer, Opera, Safari, Konqueror ბრაუზერების გათვალისწინებით, მაშინ თქვენ მისასალმებელია. გარდა ამისა, განიხილეთ მზა გადაწყვეტა javascript-ის გამოყენებით გამჭვირვალობის თანდათანობით შეცვლისთვის. CSS გამჭვირვალობა (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-ით ან ბრაუზერით მხარს არ უჭერს არცერთ მეთოდს, რომელიც ცნობილია ფუნქციისთვის გამჭვირვალობის კონტროლისთვის, თუ (opacityProp=="ფილტრი") // Internet Exploder 5.5+ ( nOpacity *= 100; // თუ გამჭვირვალობა უკვე დაყენებულია, მაშინ შეცვალეთ იგი ფილტრებით კოლექცია, წინააღმდეგ შემთხვევაში დაამატეთ გამჭვირვალობა style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOlpha; else elem.style.ფილტრი += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // იმისათვის, რომ არ გადაწეროთ სხვა ფილტრები, გამოიყენეთ "+=" ) else // სხვა ბრაუზერები elem.style = nOpacity; ) ფუნქცია getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 თავსებადი (Moz 1.7+, Safari 1.2+, Opera 9) დააბრუნებს "გაუმჭვირვალობას"; else if (typeof document.body.style.MozOpacity == "string") // 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 ნაწილის ახსნა. VaroAlpha = elem.ფილტრები["DXImageTransform.Microsoft.alpha"] || elem.ფილტრები.ალფა; თუ (oAlpha) oAlpha.გაუმჭვირვალობა = nგაუმჭვირვალობა; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; შეიძლება გაჩნდეს კითხვა, რატომ არ დააყენოთ გამჭვირვალობა თვისებისთვის elem.style.filter = "..."-ისთვის (=) მინიჭებით; ? რატომ გამოვიყენოთ "+=" ფილტრის თვისების დასამატებლად სტრიქონის ბოლოს? პასუხი მარტივია, რათა სხვა ფილტრები არ "გადაწეროთ". მაგრამ ამავდროულად, თუ ამ გზით მეორედ დაამატებთ ფილტრს, მაშინ ის არ შეცვლის ამ ფილტრის ადრე დაყენებულ მნიშვნელობებს, არამედ უბრალოდ დაემატება ქონების ხაზის ბოლოს, რაც არ არის სწორი. ამიტომ, თუ ფილტრი უკვე დაყენებულია, მაშინ საჭიროა მისი მანიპულირება ელემენტზე გამოყენებული ფილტრების კოლექციით: elem.filters (მაგრამ გაითვალისწინეთ, რომ თუ ფილტრი ჯერ არ არის მინიჭებული ელემენტზე, მაშინ შეუძლებელია მისი მართვა. ეს ამ კოლექციის მეშვეობით). კოლექციის ელემენტებზე წვდომა შესაძლებელია ფილტრის სახელით ან ინდექსით. თუმცა, ფილტრი შეიძლება განისაზღვროს ორ სტილში, მოკლე IE4 სტილში ან IE5.5+ სტილში, რაც გათვალისწინებულია კოდში. შეუფერხებლად შეცვალეთ ელემენტის გამჭვირვალობა მზა გამოსავალი. opacity.js ბიბლიოთეკის გამოყენებით img ( filter:alpha(გაუმჭვირვალობა=30); -moz-გაუმჭვირვალობა: 0.3; -khtml-გაუმჭვირვალობა: 0.3; გამჭვირვალობა: 0.3; ) // შექმენით წესი გამჭვირვალობის შეცვლისთვის: დააყენეთ წესის სახელი, დაწყების და დასრულების გამჭვირვალობა და არასავალდებულო პარამეტრი დაყოვნებს, რომელიც გავლენას ახდენს გამჭვირვალობის შეცვლის სიჩქარეზე fadeOpacity.addRule("oR1", .3, 1, 30);  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" /> ძირითადი ნაბიჯები: ჩვენ ვაკავშირებთ ფუნქციების ბიბლიოთეკას;
წესების განსაზღვრა fadeOpacity.addRule() მეთოდის გამოყენებით;
ჩვენ მოვუწოდებთ fadeOpacity() მეთოდს გამჭვირვალობის საწყისი მნიშვნელობიდან საბოლოო მნიშვნელობამდე შესაცვლელად, ან fadeOpacity.back() გამჭვირვალობის დონის საწყის მნიშვნელობაზე დასაბრუნებლად.ღეჭვა როგორ დავაკავშიროთ ბიბლიოთეკა, ვფიქრობ, ჩანს ზემოთ მოყვანილი მაგალითიდან. ახლა ღირს წესების განმარტების ახსნა. გამჭვირვალობის შეუფერხებლად შეცვლის მეთოდების გამოძახებამდე, თქვენ უნდა განსაზღვროთ წესები, რომლითაც განხორციელდება პროცესი: თქვენ უნდა განსაზღვროთ საწყისი და საბოლოო გამჭვირვალობა და, თუ სასურველია, მიუთითოთ დაყოვნების პარამეტრი, რომელიც გავლენას ახდენს ცვლილების პროცესის სიჩქარეზე. გამჭვირვალობა.
წესები განისაზღვრება fadeOpacity.addRule მეთოდის გამოყენებით
სინტაქსი: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
არგუმენტები:
- sRuleName - წესის სახელი, თვითნებურად დაყენებული;
- nStartOpacity და nFinishOpacity - დაწყების და დასრულების გამჭვირვალობა, რიცხვები დიაპაზონში 0.0-დან 1.0-მდე;
- nDelay - დაყოვნება მილიწამებში (სურვილისამებრ არგუმენტი, ნაგულისხმევი არის 30).
ჩვენ ვუწოდებთ გამჭვირვალობის გაქრობას fadeOpacity(sElemId, sRuleName) მეთოდების გამოყენებით, სადაც sElemId არის ელემენტის id, ხოლო sRuleName არის წესის სახელი. გამჭვირვალობის საწყის მდგომარეობაში დასაბრუნებლად გამოიყენეთ fadeOpacity.back(sElemId) მეთოდი. :მყარი მარტივი გამჭვირვალობის ცვლილებისთვის მე ასევე აღვნიშნავ, რომ გამჭვირვალობის უბრალო ცვლილებისთვის (მაგრამ არა ეტაპობრივი ცვლილებისთვის), :hover ფსევდო-სელექტორი სწორია, რომელიც საშუალებას გაძლევთ განსაზღვროთ სტილის ელემენტი იმ მომენტში, როცა მასზე მაუსით ატარებთ. a:hover img (ფილტრი:progid:DXImageTransform.Microsoft.Alpha(გაუმჭვირვალობა=30); -moz-გაუმჭვირვალობა: 0.3; -khtml-გაუმჭვირვალობა: 0.3; გამჭვირვალობა: 0.3; ) 
გთხოვთ გაითვალისწინოთ, რომ სურათი მოთავსებულია A ელემენტის შიგნით. ფაქტია, რომ Internet Explorer მე-6 ვერსიამდე ესმის :hover ფსევდო-სელექტორი, მხოლოდ ბმულებთან მიმართებაში და არა რომელიმე ელემენტთან, როგორც ეს უნდა იყოს CSS-ში. (IE7-ში სიტუაცია გამოსწორებულია) . გამჭვირვალობა და დახრილი ტექსტი IE-ში Windows XP-ის გამოშვებასთან ერთად გამოჩნდა ეკრანის შრიფტების ClearType ანტი-ალიასინგი და მასთან ერთად გვერდითი მოვლენები IE-ში ამ ანტიალიასინგის მეთოდის გამოყენებისას. რაც შეეხება ჩვენს შემთხვევას, თუ გამჭვირვალობა გამოყენებულია ელემენტზე, რომელშიც ტექსტი ჩართულია ClearType ანტი-ალიასინგის მეთოდით, მაშინ ტექსტი ნორმალურად აღარ არის ნაჩვენები (მამატური ტექსტი - თამამი, მაგალითად, ორმაგდება, შეიძლება გამოჩნდეს სხვადასხვა არტეფაქტები, მაგალითად, ტირეების, დაკბილული ტექსტის სახით). სიტუაციის გამოსასწორებლად, IE-სთვის თქვენ უნდა დააყენოთ ფონის ფერი, CSS თვისება background-color , ელემენტი, რომელზეც გამოიყენება გამჭვირვალობა. საბედნიეროდ, IE7-მა გამოასწორა შეცდომა.
ამ გაკვეთილზე ჩვენ გავაანალიზებთ ისეთ CSS თვისებებს - გამჭვირვალობას და RGBA. Opacity თვისება პასუხისმგებელია მხოლოდ ელემენტების გამჭვირვალობაზე, ხოლო RGBA ფუნქცია პასუხისმგებელია ფერსა და გამჭვირვალობაზე, თუ მიუთითებთ ალფა არხის გამჭვირვალობის მნიშვნელობას. CSS გამჭვირვალობა გამჭვირვალობის რიცხვითი მნიშვნელობა მოცემულია 0.0-დან 1.0-მდე დიაპაზონში, სადაც ნული არის სრული გამჭვირვალობა, ხოლო ერთი, პირიქით, არის აბსოლუტური გამჭვირვალობა. მაგალითად, იმისათვის, რომ ნახოთ 50% გამჭვირვალობა, თქვენ უნდა დააყენოთ მნიშვნელობა 0.5-ზე. გაითვალისწინეთ, რომ გაუმჭვირვალობა ეხება მშობლის ყველა შვილო ელემენტს. და ეს ნიშნავს, რომ ტექსტი გამჭვირვალე ფონზე ასევე გამჭვირვალე იქნება. და ეს უკვე ძალიან მნიშვნელოვანი ნაკლია, ტექსტი არც ისე კარგად გამოირჩევა.
გამჭვირვალობა CSS გამჭვირვალობის საშუალებით
სკრინშოტი ნათლად აჩვენებს, რომ შავი ტექსტი ისეთივე გამჭვირვალე გახდა, როგორც ლურჯი ფონი. Div (
ფონი: url(images/yourimage.jpg); /* ფონის სურათი */
სიგანე: 750 პიქსელი
სიმაღლე: 100px;
ზღვარი: ავტო;
}
.ლურჯი(
ფონი: #027av4; /* ფონის გამჭვირვალე ფერი */
გამჭვირვალობა: 0.3 /* ფონის გამჭვირვალობის მნიშვნელობა */
სიმაღლე: 70px;
}
h1(
padding: 6px
font-family: Arial Black;
font-weight: უფრო თამამი;
შრიფტის ზომა: 50px;
} CSS გამჭვირვალობა RGBA ფორმატში RGBA ფერის ფორმატი გაუმჭვირვალობის თვისების უფრო თანამედროვე ალტერნატივაა. R (წითელი), G (მწვანე), B (ლურჯი) - ნიშნავს: წითელი, მწვანე, ლურჯი. ბოლო ასო A ნიშნავს ალფა არხს, რომელიც ადგენს გამჭვირვალობას. RGBA, Opacity-ისგან განსხვავებით, არ მოქმედებს ბავშვის ელემენტებზე.
ახლა მოდით შევხედოთ ჩვენს მაგალითს RGBA-ს გამოყენებით. მოდით შევცვალოთ ეს ხაზები სტილში. ფონი: ##027av4; /* Ფონის ფერი */
გამჭვირვალობა: 0.3 /* ფონის გამჭვირვალობის მნიშვნელობა */
მომდევნო ერთ ხაზზე ფონი: rgba(2, 127, 212, 0.3); როგორც ხედავთ, გამჭვირვალობის მნიშვნელობა 0.3 იგივეა ორივე მეთოდისთვის. RGBA მაგალითის შედეგი: მეორე სკრინშოტი გამოიყურება ბევრად უკეთესი ვიდრე პირველი.
ბლოკების ფონის გამჭვირვალეობით თამაშით, შეგიძლიათ მიაღწიოთ საინტერესო ეფექტებს საიტზე. მნიშვნელოვანია, რომ ეს გამჭვირვალე ბლოკები მოხვდეს ფერადი ნიმუშის თავზე, როგორიცაა ფოტო. მხოლოდ ამ შემთხვევაში იქნება შესამჩნევი ეფექტი. ეს ტექნიკა დიდი ხნის განმავლობაში გამოიყენებოდა დიზაინში, თუნდაც ნებისმიერი CSS3-ის გამოჩენამდე, იგი განხორციელდა წმინდა გრაფიკულ პროგრამებში.
თუ კლიენტი მოითხოვს, რომ განლაგება კარგად გამოიყურებოდეს Internet Explorer ბრაუზერის ძველ ვერსიებში, მაშინ დაამატეთ ფილტრის თვისება და არ დაგავიწყდეთ კომენტარის გაკეთება, რათა კოდის ვალიდობა არ დაზარალდეს.
.ლურჯი(
ფონი: rgba(0, 120, 201, 0.3);
ფილტრი: ალფა (გაუმჭვირვალობა=30); /* გამჭვირვალობა IE-ში */
}
დასკვნა RGBA ფორმატი მხარდაჭერილია ყველა თანამედროვე ბრაუზერის მიერ, გარდა Internet Explorer-ისა. ასევე ძალიან მნიშვნელოვანია, რომ RGBA იყოს მოქნილი, ის გავლენას ახდენს მხოლოდ კონკრეტულ მოცემულ ელემენტზე, შვილებზე ზემოქმედების გარეშე. გასაგებია, რომ უფრო მოსახერხებელია კოდირებისთვის. ჩემი არჩევანი ნამდვილად არის RGBA ფორმატის სასარგებლოდ CSS-ში გამჭვირვალობის მისაღებად.
მასალის უკეთესი კონსოლიდაციისთვის და მეტი სიცხადისთვის, გირჩევთ გაეცნოთ. გამჭვირვალე ფონის შექმნა HTML და CSS-ში (გაუმჭვირვალობა და RGBA ეფექტები) ელემენტის გამჭვირვალე ეფექტი აშკარად ჩანს ფონის სურათზე და ფართოდ გავრცელდა სხვადასხვა ოპერაციულ სისტემაში, რადგან ის გამოიყურება ელეგანტური და ლამაზი. მთავარია, გამჭვირვალე ბლოკების ქვეშ იყოს არა მონოქრომატული ნიმუში, არამედ გამოსახულება, ამ შემთხვევაში გამჭვირვალობა შესამჩნევი ხდება.
ეს ეფექტი მიიღწევა სხვადასხვა გზით, მათ შორის მოძველებული ტექნიკის ჩათვლით, როგორიცაა PNG გამოსახულების გამოყენება ფონის სახით, შედგენილი გამოსახულების შექმნა და გამჭვირვალობის თვისების გამოყენება. მაგრამ როგორც კი საჭირო გახდება ბლოკში გამჭვირვალე ფონის გაკეთება, ამ მეთოდებს აქვთ უსიამოვნო უარყოფითი მხარეები.
განვიხილოთ ტექსტის და ფონის გამჭვირვალეობა - როგორ გამოვიყენოთ ის სწორად ვებსაიტის დიზაინში:
ამ საკუთრების მთავარი მახასიათებელია ის, რომ გამჭვირვალობის მნიშვნელობა გავლენას ახდენს შიგნით არსებულ ყველა ელემენტზე და არა მხოლოდ ფონზე. ეს ნიშნავს, რომ ფონიც და ტექსტიც გამჭვირვალე გახდება. გამჭვირვალობის დონის გაზრდა შეგიძლიათ გამჭვირვალობის ბრძანების 0.1-დან 1-მდე შეცვლით. HTML 5 CSS 3 IE 9 გაუმჭვირვალე ტექსტი ( ფონი: url(images/cat.jpg); ) div ( გამჭვირვალეობა: 0.6; ფონი: #fc0; /* ფონის ფერი */ შიგთავსი: 5 პიქსელი; /* შეფუთვა ტექსტის გარშემო */ ) საიტების შექმნა და პოპულარიზაცია ინტერნეტში ვებ დიზაინში ნაწილობრივი გამჭვირვალობა ასევე გამოიყენება და მიიღწევა RGBA ფერის ფორმატის საშუალებით, რომელიც დაყენებულია მხოლოდ ელემენტის ფონზე.
როგორც წესი, დიზაინში, ელემენტის მხოლოდ ფონი უნდა იყოს გამჭვირვალე, ხოლო ტექსტი უნდა იყოს გაუმჭვირვალე, რომ იკითხებოდეს. გამჭვირვალობის თვისება აქ არ ჯდება, რადგან ელემენტის შიგნით ტექსტი ასევე ნაწილობრივ გამჭვირვალე იქნება. უმჯობესია გამოიყენოთ RGBA ფორმატი, რომლის ნაწილია ალფა არხი, ან სხვა სიტყვებით რომ ვთქვათ, გამჭვირვალობის მნიშვნელობა. მნიშვნელობა იწერება rgba, შემდეგ ფერის წითელი, ლურჯი და მწვანე კომპონენტების მნიშვნელობები ჩამოთვლილია მძიმით გამოყოფილი ფრჩხილებში. ბოლოს მოდის გამჭვირვალობა, რომელიც დაყენებულია 0-დან 1-მდე, სადაც 0 არის სრულად გამჭვირვალე და 1 გაუმჭვირვალე, სინტაქსი rgba-ს გამოყენებისთვის. ნახევრად გამჭვირვალე ფონი HTML 5 CSS 3 IE 9 rgba body ( ფონი: url(images/cat.jpg); ) div (ფონი: rgba(0, 170, 238, 0.4); /* ფონის ფერი */ ფერი: #fff ; / * ტექსტის ფერი */ padding: 5px; /* მინდვრები ტექსტის ირგვლივ */ ) საიტების შექმნა და პოპულარიზაცია ინტერნეტში. ფონის გამჭვირვალობის მნიშვნელობა დაყენებულია 90%-ზე - გამჭვირვალე ფონი და გაუმჭვირვალე ტექსტი.
CSS გამჭვირვალობა - ბრაუზერის გადაწყვეტა - 3.8 5-დან 6 ხმის საფუძველზე
ამ გაკვეთილში ჩვენ გადავხედავთ CSS გამჭვირვალობას, ვისწავლით როგორ გავხადოთ გვერდის სხვადასხვა ელემენტები და მივაღწიოთ სრულ ჯვარედინი ბრაუზერს, ანუ ამ ეფექტის იგივე ეფექტს სხვადასხვა ბრაუზერში. როგორ დავაყენოთ ნებისმიერი ელემენტის გამჭვირვალობა CSS3-ში opacity თვისება პასუხისმგებელია გამჭვირვალე ელემენტების შექმნაზე, რომლებიც შეიძლება გამოყენებულ იქნას ნებისმიერ ელემენტზე. ამ თვისებას აქვს მნიშვნელობები 0-დან 1-მდე, რაც განსაზღვრავს გამჭვირვალობის ხარისხს. სადაც 0 არის სრულად გამჭვირვალე (ნაგულისხმევი მნიშვნელობა ყველა ელემენტისთვის) და 1 არის სრულიად გაუმჭვირვალე. მნიშვნელობები იწერება წილადებად: 0.1, 0.2, 0.3 და ა.შ.
გამოყენების მაგალითი:
გამჭვირვალობა .im (ფილტრი: ალფა(გაუმჭვირვალობა=50); -moz-გაუმჭვირვალობა: 0.5; -khtml-გაუმჭვირვალობა: 0.5; გამჭვირვალობა: 0.5; )
ჯვარი ბრაუზერის გამჭვირვალობა ყველა ბრაუზერი არ აღიქვამს და ახორციელებს ზემოხსენებულ გამჭვირვალობის თვისებას ერთნაირად. ზოგიერთ შემთხვევაში აუცილებელია სხვა ქონების სახელის ან ფილტრების გამოყენება.
CSS3 opacity თვისებას მხარს უჭერს შემდეგი ბრაუზერები Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
ძალიან კარგია :) ბრაუზერს, როგორიცაა Internet Explorer 9.0 ვერსიამდე, არ აქვს გამჭვირვალე თვისების მხარდაჭერა და ამ ბრაუზერის გამჭვირვალობის შესაქმნელად საჭიროა გამოიყენოთ ფილტრის თვისება და მნიშვნელობა alpha(Opacity=X), სადაც X არის მთელი რიცხვი 0-დან 100-მდე, რომელიც განსაზღვრავს გამჭვირვალობის დონე. 0 არის სრული გამჭვირვალობა და 100 სრული გამჭვირვალობა.
რაც შეეხება Firefox-ს 3.5 ვერსიამდე, ის მხარს უჭერს -moz-opacity თვისებას გამჭვირვალობის ნაცვლად.
KHTML ძრავზე აგებული ბრაუზერები, როგორიცაა Safari 1.1 და Konqueror 3.1, იყენებენ -khtml-opacity თვისებას გამჭვირვალობის გასაკონტროლებლად.
როგორ დავაყენოთ გამჭვირვალობა CSS-ში ისე, რომ ყველა ბრაუზერში ერთნაირად გამოიყურებოდეს? ელემენტების გამჭვირვალობისთვის ბრაუზერის გადაწყვეტის შესაქმნელად, მათ უნდა დაარეგისტრირონ არა მხოლოდ ერთი გამჭვირვალე თვისება, არამედ თვისებების შემდეგი ნაკრები:
ფილტრი: ალფა (გაუმჭვირვალობა=50); /* გამჭვირვალობა IE-სთვის */ -moz-გაუმჭვირვალობა: 0.5; /* მხარდაჭერა Mozilla 3.5 და ქვემოთ */ -khtml-გაუმჭვირვალობა: 0.5; /* Konqueror 3.1-ისა და Safari 1.1-ის მხარდაჭერა */ opacity: 0.5; /* ყველა სხვა ბრაუზერის მხარდაჭერა */ სხვადასხვა ელემენტების გამჭვირვალობა მოდით შევხედოთ ზოგიერთ ელემენტს გამჭვირვალობის დაყენების მაგალითებს, რომლებიც ყველაზე ხშირად გამოიყენება გვერდზე.
CSS გამოსახულების გამჭვირვალობა.
განვიხილოთ რამდენიმე ვარიანტი გამჭვირვალე გამოსახულების შესაქმნელად. შემდეგ მაგალითში პირველ სურათს არ აქვს გამჭვირვალობა, მეორეს 50% და მესამეს 30%.
გამჭვირვალობა .im1 ( ფილტრი: ალფა(გაუმჭვირვალობა=50); -moz-გაუმჭვირვალობა: 0.5; -khtml-გაუმჭვირვალობა: 0.5; გამჭვირვალობა: 0.5; ) .im2 (ფილტრი: ალფა(გაუმჭვირვალობა=30); -moz-გაუმჭვირვალობა: 0.3 ; -khtml-გაუმჭვირვალობა: 0.3; გამჭვირვალობა: 0.3; )
შედეგი:
გამჭვირვალობა CSS-ში სურათზე გადასვლისას.
ხშირად საჭიროა სურათის ან ნებისმიერი სხვა ელემენტის გამჭვირვალე გახდომა იმ მომენტში, როდესაც მასზე კურსორი დევს. ეს შეიძლება გაკეთდეს :hover CSS ფსევდო კლასის გამოყენებით. ამისათვის ჩვენმა სურათმა უნდა დაარეგისტრიროს ორი კლასი, ერთი ჩვეულებრივი - ეს იქნება სურათის არააქტიური მდგომარეობა და მეორე კლასი ფსევდოკლასით: გადაიტანეთ, აქ თქვენ უნდა მიუთითოთ სურათის გამჭვირვალობა იმ დროს. კურსორის მოტრიალება.
გამჭვირვალობა .im1 ( ფილტრი: ალფა(გაუმჭვირვალობა=100); -moz-გაუმჭვირვალობა: 1; -khtml-გაუმჭვირვალობა: 1; გამჭვირვალობა: 1; ).im1:ჰოვერი (ფილტრი: ალფა(გაუმჭვირვალობა=50); -moz-გაუმჭვირვალობა : 0.5; -khtml-გაუმჭვირვალობა: 0.5; გამჭვირვალობა: 0.5; .im2 (ფილტრი: alpha(გაუმჭვირვალობა=30); -moz-გაუმჭვირვალობა: 0.3; -khtml-გაუმჭვირვალობა: 0.3; გამჭვირვალობა: 0.3; ) .im2: hoover (ფილტრი: ალფა(გაუმჭვირვალობა=100); -moz-გაუმჭვირვალობა: 1; -khtml-გაუმჭვირვალობა: 1; გამჭვირვალობა: 1; )
შედეგის ნახვა შეგიძლიათ დემოში.
CSS ფონის გამჭვირვალობა
აქ თქვენ უნდა გახსოვდეთ, რომ გამჭვირვალობა ვრცელდება ყველა ჩადგმულ ელემენტზე და მათ არ შეიძლება ჰქონდეთ უფრო მეტი გამჭვირვალობა, ვიდრე ჩასმული ელემენტი.
მაგალითად, მოდით მივცეთ ვარიანტი გვერდის ფონით, რომელიც შექმნილია გამოსახულების გამოყენებით და ბლოკი ფონით, რომელიც შექმნილია ფერის გამოყენებით და აქვს 50% გამჭვირვალობა.
კოდის მაგალითი:
გამჭვირვალობა BODY ( ფონი: url(bg.png); /* ფონის სურათი */ ) .blok ( ფონი: #FC0; /* ფონის ფერი */ padding: 5px; /* padding */ ფერი: #000000; /* ტექსტი ფერი */ ფილტრი: ალფა (გაუმჭვირვალობა=50); -moz-გაუმჭვირვალობა: 0.5; -khtml-გაუმჭვირვალობა: 0.5; გამჭვირვალობა: 0.5; ) ტექსტი
აი, ზემოთ მოყვანილი კოდის შედეგი:
| 
