Öğenin yarı saydam etkisi açıkça görülebilir. Arkaplan resmi ve çeşitli bölgelerde yaygınlaştı işletim sistemleriçünkü şık ve güzel görünüyor. Önemli olan yarı saydam blokların altında tek renkli bir desene değil, bir görüntüye sahip olmaktır; bu durumda şeffaflık fark edilir hale gelir.
Bu etki elde edilir Farklı yollar kullanmak gibi eski moda yöntemleri de içeren PNG resmi arka plan olarak damalı bir görüntü ve opaklık özelliği oluşturur. Ancak blokta zemin yapma ihtiyacı ortaya çıkar çıkmaz şeffaf arka plan Bu yöntemlerin hoş olmayan dezavantajları vardır.
Metin ve arka planın yarı saydamlığına, web sitesi tasarımında nasıl doğru şekilde kullanılacağına bakalım:
Bu özelliğin ana özelliği, şeffaflık değerinin yalnızca arka planı değil, içindeki tüm alt öğeleri etkilemesidir. Bu, hem arka planın hem de metnin yarı saydam olacağı anlamına gelir. Opaklık komutunu 0,1'den 1'e değiştirerek şeffaflık düzeyini artırabilirsiniz.
HTML 5 CSS 3 IE 9 opaklık gövdesi ( arka plan: url(images/cat.jpg); ) div ( opaklık: 0,6; arka plan: #fc0; /* Arka plan rengi */ dolgu: 5 piksel; /* Metnin etrafındaki kenar boşlukları */ ) İnternette web sitelerinin oluşturulması ve tanıtılması
Web tasarımında kısmi şeffaflık da kullanılır ve format aracılığıyla elde edilir. RGBA renkleri, yalnızca öğenin arka planı için ayarlanır.
Tipik olarak bir tasarımda, bir öğenin yalnızca arka planı yarı saydam olmalı ve okunabilirliği korumak için metin opak olmalıdır. Opaklık özelliği burada uygun değildir çünkü öğenin içindeki metin de kısmen şeffaf olacaktır. Bunun bir parçası olarak bir alfa kanalına veya başka bir deyişle şeffaflık değerine sahip olan RGBA formatını kullanmak en iyisidir. Değer rgba yazılır, ardından kırmızı, mavi ve yeşil renk bileşenlerinin değerleri virgülle ayrılarak parantez içinde listelenir. Sonuncusu, 0'dan 1'e ayarlanan şeffaflıktır; 0, tam şeffaflık ve 1 renk opaklığı anlamına gelir - rgba kullanımının sözdizimi.
Yarı saydam arka plan HTML 5 CSS 3 IE 9 rgba body ( arka plan: url(images/cat.jpg); ) div ( arka plan: rgba(0, 170, 238, 0.4); /* Arka plan rengi */ color: #fff ; / * Metin rengi */ dolgu: 5px; /* Metnin etrafındaki kenar boşlukları */ ) İnternette web sitelerinin oluşturulması ve tanıtılması. Arka plan opaklık değeri %90 olarak ayarlandı - yarı saydam arka plan ve opak metin.
Sayfa öğelerinin şeffaflığını kontrol etmek için CSS opaklık özelliğini kullanın. Spesifikasyona göre, her türlü düğüm için geçerlidir ve tüm modern tarayıcılarda desteklenir. Onun yardımıyla ilginç bir tasarım oluşturabilir veya uygun etkileşimli kullanıcı etkileşimi uygulayabilirsiniz.
Olası değerlerCss'deki opacity özelliğinin sözdizimi şuna benzer:
Seçici (opaklık: 1; ) seçici (opaklık: 0; ) seçici (opaklık: 0,4; )
Giriş kabul edildi sayısal değerler 0 ila 1 aralığında. Parametre birin kesirlerini temsil edebilirken, CSS'de ondalık ayırıcı olarak nokta kullanılır.
Sıfır şeffaflığa sahip bir öğe görünmez hale gelir ancak yine de sayfadaki yerini almaya devam eder ve kullanıcıyla etkileşim kurma yeteneğini korur.
Özellik değeri sıfır değilse, gerçek şeffaflık bazı üst limitlerin yüzdesi olarak hesaplanacaktır. Normal bir durumda opaklık: 1, öğenin tam opaklığını belirler.
Alt düğümlerin şeffaflığıAncak öğenin şeffaflığı birden farklı olan bir ebeveyni varsa hesaplama değişir. Bir nesil, atalarının herhangi birinden "daha az şeffaf" olamaz. CSS opaklık özelliğinin anlamı ebeveyn bloğu alt düğümün şeffaflığının üst sınırı olur.
Ebeveyn (opaklık: 0,7; ) çocuk (opaklık: 1; )
Bu durumda opaklık değeri bir olsa bile alt öğe %30 şeffaf olacaktır.
Örnek 1: Yarı saydamlık. Bloğun ana arka planının hedef elemanın altında görünür olması gerekmektedir.
Hedef (arka plan: siyah; opaklık: 0,5; )
Yalnızca hedef bloğun arka planı değil, aynı zamanda metin de yarı saydam hale gelir.
Örnek 2. Dinamik Kontrolşeffaflık. Hedef bloğun CSS opaklık özelliğinin değeri, üzerine geldiğinizde değişir.
Hedef ( opaklık: 0,2; ) .target:hover ( opaklık: 1; )
Son örnekşeffaf öğelerin fareyle üzerine gelme gibi sayfa olaylarına yanıt vermeye devam ettiğini gösterir. Bu, CSS opaklık özelliğini kontrol etmek için javascript kullanmanıza ve ayrıca görüntüleme modunu sorunsuz bir şekilde değiştirmek için geçiş ve animasyon mekanizmalarını kullanmanıza olanak tanır.
Bir komut dosyasından şeffaflığa erişmek için belirli bir öğenin stil nesnesine erişmeniz gerekir.
// geçerli şeffaflık değerini alma var opacity = element.style.opacity; // yeni bir değer ayarlıyoruz element.style.opacity = 0,4;
Bir bloğun düzgün bir şekilde kaybolması CSS geçiş özelliği kullanılarak sağlanabilir:
Öğe ( opaklık: 0,1; geçiş: opaklık 1000 ms; ) öğe: vurgulu ( opaklık: 0,8; geçiş: opaklık 2000 ms; )
Artık öğe düğümü, fareyle üzerine gelindiğinde şeffaflığı bir saniye içinde %10'dan %80'e değiştirecek ve imleç ayrıldığında iki saniye içinde orijinal değerine kararacaktır.
Geçiş mekanizmasıyla birlikte CSS opaklık özelliği, oluşturmanıza olanak tanır güzel efektler.
Opaklık yerine alfa kanalıCSS'deki opaklık mekanizmasının ana incelikleri:
- etkisi yalnızca bloğun arka planına değil aynı zamanda bloğun arka planına da uzanır. Metin içeriği açık bırakılması tercih edilir;
- alt öğeler ana öğelerden daha az şeffaf olamaz.
Bu efektler düzen tasarımcısının hayatını zorlaştırıyorsa, opaklık yerine basit, şeffaf bir arka plan kullanmalısınız. RGBA formatı veya HSLA'dır.
CSS'de şeffaflık oldukça moda bir tekniktir. Son zamanlarda bu da tarayıcılar arası uygulamada zorluklara neden olur. Hala yok evrensel yöntem Bu, tüm tarayıcılar için şeffaflığa olanak tanır. Ancak son zamanlarda durum önemli ölçüde iyileşti.
Bu makalede ayrıntılı olarak tartışılmaktadır mevcut yaklaşımlar, ayrıca tüm tarayıcılarda aynı sonucu minimum çabayla elde etmenize yardımcı olacak kod örnekleri ve açıklamalar.
Bahsetmeye değer bir nokta da şeffaflığın birkaç yıldır ortalıkta olmasına rağmen hiçbir zaman CSS standardının bir parçası olmamış olmasıdır. Bu, CSS3 spesifikasyonunun bir parçası olması gereken standart dışı bir özelliktir.
Eski yaklaşımEski Firefox sürümleri ve Safari'nin bu özelliği uygulaması gerekiyor Aşağıdaki şekilde:
#myElement ( -khtml-opacity: 0,5; -moz-opacity: 0,5; )
-khtml-opacity özelliği webkit tarayıcılarının eski sürümlerinde kullanılıyordu. Bu özellik kullanımdan kaldırılmıştır ve sitenizin trafiğinin önemli bir kısmının Safari 1.x kullanan ziyaretçilerden geldiğinden emin olmadığınız sürece artık gerekli değildir, ki bu da pek olası değildir.
İÇİNDE Sonraki satırçok iyi çalışan -moz-opacity özelliğini kullanıyor önceki versiyonlar Mozilla'nın motoru. Firefox, 0.9 sürümünde bunu desteklemeyi bıraktı.
Firefox, Safari, Chrome ve Opera'da CSS şeffaflığıÇoğu için modern tarayıcılar aşağıdaki özelliği kullanmak yeterlidir:
#myElement ( opaklık: .7; )
Yukarıdaki örnekte öğe %70 opaklığa (%30 şeffaflığa) ayarlanmıştır. Yani değeri bir olarak ayarlarsak eleman opak olacaktır ve buna göre bu değeri sıfıra ayarlamak onu görünmez hale getirecektir.
Opaklık özelliği 2'yi işler Ondalık basamak. Yani ".01" değeri ".02" değerinden farklı olacaktır, ancak bu fark edilmeyecektir.
için CSS şeffaflığı İnternet ExplorerHer zamanki gibi Internet Explorer diğer tarayıcılarla uyumlu değildir. Üstelik şu anda oldukça yaygın kullanım Bu tarayıcının, her birinin şeffaflık ayarı farklı olan ve bazen olumlu bir sonuç elde etmek için ek çaba gerektiren üç sürümü vardır.
#myElement ( filtre: alfa(opaklık=40); )
Bu örnekte, 6-8 sürümlerinde çalışan filter özelliği kullanılmaktadır, ancak 6 ve 7 sürümlerinde bir sınırlama vardır: öğenin hasLayout özelliği true olarak ayarlanmalıdır. Bu özellik yalnızca IE'de mevcuttur ve bunun hakkında daha fazla bilgiyi örneğin Habré'de okuyabilirsiniz.
IE8'de CSS kullanarak şeffaflığı ayarlamanın başka bir yolu da aşağıdaki yaklaşımı kullanmaktır (yorumlara dikkat edin):
#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6, IE7 ve IE8'de çalışır */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * yalnızca IE8 için */ )
İlk satır şu anda kullanılan tüm sürümlerde, ikincisi ise yalnızca IE8'de çalışacaktır. İkinci satırın -ms- önekini kullandığını ve değerin tırnak içinde olduğunu unutmayın.
CSS şeffaflığını ayarlama ve değiştirme JavaScript'i kullanma veya jQuerykullanabilirsiniz aşağıdaki kodşeffaflığı ayarlamak için:
Document.getElementById("myElement").style.opacity = ".4"; // çoğu tarayıcı için document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // IE için
Elbette bu durumda jQuery'yi kullanmak çok daha kolaydır, ayrıca tüm tarayıcılarda çalışacaktır:
$("#myElement").css(( opaklık: .4 )); // tüm tarayıcılarda çalışır
Bu özelliği canlandırabilirsiniz:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animasyon tamamlandı; bu kod tüm tarayıcılarda çalışır. ));
RGBA işleviCSS3, rgba işlevini kullanarak alfa kanallarını desteklemeyi planlıyor. Bu özellik Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ sürümlerinde çalışır. Bu şekilde kullanılır:
#rgba ( arka plan: rgba(98, 135, 167, .4); )
Bu durumda son parametre opaklık düzeyini gösterir.
HSLA işleviBeğenmek önceki işlev CSS3 ayrıca parametreleri Ton, Doygunluk, Açıklık ve Alfa olan HSLA işlevini kullanarak yarı şeffaf bir renk ayarlamanıza da olanak tanır.
#hsla ( arka plan: hsla(207, %38, %47, 0,4); )
rgba ve hsla işlevlerini kullanırken önemli bir nokta, şeffaflık ayarının alt öğelere uygulanmaması, opacity özelliğinin kullanımının ise miras alınmasıdır.
CSS şeffaflığı - tarayıcılar arası çözüm - 5 oy üzerinden 5 üzerinden 3,6
İÇİNDE bu ders CSS şeffaflığına bakacağız, nasıl ekleneceğini öğreneceğiz çeşitli unsurlar sayfa şeffaflığını artırın ve tarayıcılar arası tam uyumluluğa ulaşın; yani bu etki farklı tarayıcılarda aynı şekilde çalışır.
Herhangi bir öğenin şeffaflığı nasıl ayarlanırCSS3'te opacity özelliği, herhangi bir öğeye uygulanabilecek şeffaf öğelerin oluşturulmasından sorumludur. sen bu mülkünŞeffaflığın derecesini belirleyen 0'dan 1'e kadar değerler vardır. Burada 0 tam şeffaflıktır (tüm öğeler için varsayılan değer), 1 ise tam opaklıktır. Değerler kesir olarak yazılır: 0,1, 0,2, 0,3 vb.
Kullanım örneği:
Şeffaflık .im ( filtre: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacity: 0,5; )
Yukarıdaki opaklık özelliğini tüm tarayıcılar aynı şekilde algılamaz ve uygulamaz. Bazı durumlarda farklı bir özellik adı veya filtrelerin kullanılması gerekebilir.
Aşağıdaki görünümler CSS3 opaklık özelliğini destekler Mozilla tarayıcıları 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Çok iyi :) Internet Explorer gibi 9.0 sürümüne kadar bir tarayıcı opacity özelliğini desteklemez ve bu tarayıcı için şeffaflık oluşturmak için, filter özelliğini ve X'in bir tamsayı olduğu alpha(Opacity=X) değerini kullanmanız gerekir. Şeffaflık düzeyini belirleyen 0 ila 100 aralığı. 0 tamamen şeffaftır ve 100 tamamen opaktır.
Firefox'un 3.5 sürümünden önceki sürümünden itibaren, opacity yerine -moz-opacity özelliğini desteklemektedir.
KHTML motoru üzerine kurulu Safari 1.1 ve Konqueror 3.1 gibi tarayıcılar, şeffaflığı kontrol etmek için -khtml-opacity özelliğini kullanır.
Tüm tarayıcılarda aynı görünmesi için CSS'deki şeffaflığı nasıl ayarlayabilirsiniz? Öğe şeffaflığına yönelik tarayıcılar arası bir çözüm oluşturmak için yalnızca bir opaklık özelliğini değil, aşağıdaki özellik kümesini de belirtmeleri gerekir:
filtre: alfa(Opaklık=50); /* IE için şeffaflık */ -moz-opacity: 0,5; /* Mozilla 3.5 ve aşağısını destekler */ -khtml-opacity: 0.5; /* Konqueror 3.1 ve Safari 1.1'i destekler */ opacity: 0.5; /* Diğer tüm tarayıcıları destekler */
Çeşitli öğelerin şeffaflığıSayfada en sık kullanılan belirli öğelere şeffaflık ayarlamanın bazı örneklerine bakalım.
CSS görüntü şeffaflığı.
Yarı saydam bir resim oluşturmak için çeşitli seçeneklere bakalım. Aşağıdaki örnekte, ilk görüntünün şeffaflık ayarı yoktur, ikincisinin şeffaflığı %50'dir ve üçüncüsünün şeffaflığı %30'dur.
Şeffaflık .im1 ( filtre: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacity: 0,5; ) .im2 ( filter: alpha(Opacity=30); -moz-opacity: 0,3 ; -khtml-opaklık: 0,3;
Sonuç:
Bir resmin üzerine gelindiğinde CSS'de şeffaflık.
Çoğu zaman bunu yapmak gerekir şeffaf resim veya imleç onun üzerine geldiği anda başka bir öğe. Bu ile yapılabilir CSS yardımı sözde sınıf: üzerine gelin. Bunu yapmak için, resmimize biri normal olmak üzere iki sınıf atanması gerekir - bu, resmin etkin olmayan durumu ve sözde sınıfa sahip ikinci sınıf olacaktır: vurgulu, burada şu anda resmin şeffaflığını belirtmeniz gerekir imleci gezdirmenin.
Şeffaflık .im1 ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ) .im1:hover ( filter: alpha(Opacity=50); -moz-opacity : 0,5; -khtml-opaklık: 0,5; opaklık: 0,5; ) .im2 ( filtre: alpha(Opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; opaklık: 0,3; ) .im2:hover ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opaklık: 1; )
Sonucu demoda görebilirsiniz.
CSS kullanarak arka plan şeffaflığı.
Burada şeffaflığın iç içe geçmiş tüm öğeler için geçerli olduğunu ve iç içe geçmiş öğeden daha fazla şeffaflığa sahip olamayacaklarını unutmamak gerekir.
Örnek olarak, bir resim kullanılarak oluşturulan sayfa arka planına ve renk kullanılarak oluşturulan ve %50 şeffaflığa sahip bir arka plana sahip bir blok içeren bir varyant vereceğiz.
Örnek kod:
Şeffaflık BODY ( arka plan: url(bg.png); /* Arka plan olarak resim */ ) .blok ( arka plan: #FC0; /* Arka plan rengi */ dolgu: 5 piksel; /* Dolgu */ color: #000000; /* Metin rengi */ filtre: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5;
Yukarıda yayınlanan kodun sonucu:
/* 06.07.2006 */
CSS şeffaflığı (css opaklığı, javascript opaklığı)Şeffaflık etkisi bu makalenin konusudur. CSS veya Javascript kullanarak HTML sayfa öğelerini nasıl şeffaf hale getireceğinizi ve bu hususları dikkate alarak tarayıcılar arası uyumluluğun (farklı tarayıcılarda aynı şekilde çalışarak) nasıl elde edileceğini öğrenmekle ilgileniyorsanız Firefox tarayıcıları, Internet Explorer, Opera, Safari, Konqueror, o zaman hoş geldiniz. Ayrıca şunu göz önünde bulundurun hazır çözüm Javascript kullanarak şeffaflığı kademeli olarak değiştirme.
CSS opaklığı (CSS şeffaflığı) CSS opaklığı simbiyozuSimbiyoz derken birleşmeyi kastediyorum farklı stillerİçin farklı tarayıcılar birinde CSS kuralıİstenilen etkiyi elde etmek için; tarayıcılar arası uyumluluğu uygulamak için.
Filtre:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5,5+*/ -moz-opacity: 0,5; /* Mozilla 1.6 ve altı */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
Aslında, IE5.5+ ve CSS3 opaklığını anlayan tarayıcılar için ilk ve son kurallara ihtiyaç vardır ve ortadaki iki kural elbette bir fark yaratmaz, ancak ikisi de gerçekten müdahale etmez (kendiniz karar verin) ihtiyacınız olup olmadığı).
Javascript opaklık simbiyozuŞimdi yukarıda açıklanan farklı tarayıcıların özelliklerini dikkate alarak bir komut dosyası aracılığıyla şeffaflığı ayarlamaya çalışalım.
Fonksiyon setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Belirtilen kimliğe veya tarayıcıya sahip bir öğe yoksa şeffaflığı kontrol etme yollarının bilinen işlevlerinden birini desteklemez if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Şeffaflık zaten ayarlanmışsa, bunu filtreler koleksiyonu aracılığıyla değiştirin , aksi takdirde style.filter aracılığıyla şeffaflık ekleyin oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+""; // Diğer filtrelerin üzerine yazmamak için "+=" kullanın) else // Diğer tarayıcılar elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3 uyumlu (Moz 1.7+, Safari 1.2+, Opera 9) "opacity" değerini döndürür; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 ve öncesi, Firefox 0.8 "MozOpacity" değerini döndürür; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ "filtre" değerini döndürür; yanlış döndür; //şeffaflık yok)
İşlev iki argüman alır: sElemId - öğenin kimliği, nOpacity - CSS3 opaklık stilinde şeffaflığı belirten 0,0 ile 1,0 arasında bir gerçek sayı.
setElementOpacity fonksiyon kodunun IE kısmını açıklamaya değer olduğunu düşünüyorum.
Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");
Neden elem.style.filter = "..."; özelliğine (=) atayarak şeffaflığı ayarlamadığınızı merak edebilirsiniz. ? Filtre özelliğini dizenin sonuna eklemek için neden "+=" kullanılıyor? Diğer filtrelerin "üzerine yazılmaması" için cevap basittir. Ancak aynı zamanda ikinci kez bu şekilde bir filtre eklerseniz, önceki filtreyi değiştirmeyecektir. değerleri belirle ancak özellik satırının sonuna eklenecektir ki bu doğru değildir. Bu nedenle, eğer bir filtre zaten kuruluysa, öğeye uygulanan filtreler koleksiyonu aracılığıyla onu değiştirmeniz gerekir: elem.filters (ancak filtre henüz öğeye atanmamışsa bunun imkansız olduğunu unutmayın) bu koleksiyon aracılığıyla yönetmek için). Koleksiyon öğelerine filtre adına veya dizine göre erişilebilir. Ancak filtre, kodda dikkate alınan IE4 kısa stili veya IE5.5+ stili olmak üzere iki stilde belirtilebilir.
Bir öğenin şeffaflığını sorunsuz bir şekilde değiştirmeHazır çözüm. opacity.js kütüphanesini kullanıyoruz
img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Şeffaflığı değiştirmek için bir kural oluşturun: kural adını ayarlayın, şeffaflığı başlatın ve sonlandırın. şeffaflığın hızını etkileyen isteğe bağlı gecikme parametresinin yanı sıra fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout = "fadeOpacity.back(this.id) " src = "/img/strawberry.jpg" width = "100" yükseklik = "80" />
fadeOpacity(this.id, "oR1") " onmouseout = "fadeOpacity.back(this.id) " src = "/img/tomato.jpg" width = "82" yükseklik = "100" />
fadeOpacity(this.id, "oR1") " onmouseout = "fadeOpacity.back (this.id) " src = "/img/sweet_cherry.jpg" width = "98" height = "97" />
Kütüphanenin nasıl bağlanacağı yukarıdaki örnekte görülebileceğini düşünüyorum. Şimdi kuralların tanımını açıklamaya değer. Şeffaflığı sorunsuz bir şekilde değiştirme yöntemlerini çağırmadan önce, işlemin gerçekleştirileceği kuralları tanımlamanız gerekir: ilk ve son şeffaflığı belirlemeniz ve ayrıca istenirse sürecin hızını etkileyen bir gecikme parametresi belirtmeniz gerekir. şeffaflığı değiştirmek.
Kurallar fadeOpacity.addRule yöntemi kullanılarak tanımlanır
Sözdizimi: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Argümanlar:
- sRuleName - keyfi olarak belirlenen kural adı;
- nStartOpacity ve nFinishOpacity - başlangıç ve bitiş şeffaflığı, 0,0 ila 1,0 aralığındaki sayılar;
- nDelay - milisaniye cinsinden gecikme ( isteğe bağlı argüman, varsayılan 30'dur).
Şeffaflık sönümlemesinin kendisini fadeOpacity(sElemId, sRuleName) yöntemleri aracılığıyla çağırırız; burada sElemId öğenin kimliğidir ve sRuleName ise kuralın adıdır. Şeffaflığa geri dönmek için başlangıç durumu fadeOpacity.back(sElemId) yöntemi kullanılır.
:şeffaflığı kolayca değiştirmek için üzerine gelinAyrıca, basit bir şeffaflık değişikliği için (ancak kademeli bir değişiklik değil), :hover sözde seçicinin tam olarak doğru olduğunu ve bu, fareyi üzerine getirdiğinizde bir öğenin stillerini tanımlamanıza olanak tanıdığını da not edeceğim.
a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; opacity: 0,3; ) 
Lütfen görüntünün A öğesinin içine yerleştirildiğini unutmayın. Gerçek şu ki, Internet Explorer sürüm 6'ya kadar sözde seçici:hover'ı CSS'de olması gerektiği gibi herhangi bir öğeyle değil yalnızca bağlantılarla ilişkili olarak anlar (durum) IE7'de düzeltilmiştir).
IE'de şeffaflık ve pürüzlü metinİLE Windows sürümü XP kenar yumuşatma ekledi ekran yazı tipleri ClearType yöntemi ve bununla birlikte bu kenar yumuşatma yöntemini kullanırken IE'deki yan etkiler. Bizim durumumuzla ilgili olarak, yöntem etkinleştirildiğinde metin içeren bir öğeye şeffaflık uygulanırsa ClearType yumuşatma, daha sonra metnin normal şekilde görüntülenmesi durdurulur (örneğin kalın metin, çiftler, çeşitli yapılar da görünebilir, örneğin kısa çizgi, pürüzlü metin şeklinde). Durumu düzeltmek için IE'yi ayarlamanız gerekir. arka plan rengi, CSS özelliği arka plan rengi, şeffaflığın uygulandığı öğe. Neyse ki hata IE7'de düzeltildi.
Samsung Galaxy A7 (2017) incelemesi: sudan ve tasarruftan korkmayın Samsung a7 satın almaya değer mi
Android'de ürün yazılımının yedeğini alma
Takas dosyası nasıl yapılandırılır?
Windows'ta Uyumluluk Modunu Ayarlama
Windows Sürücü Yedekleme ve Geri Yükleme