CSS'de şeffaflık etkisi oluşturmak için Opacity özelliği kullanılır.

IE8 Tarayıcı ve önceki sürümler Alternatif bir özelliği destekler - filtre: "x", burada "x", 0 ila 100 arasında bir değer alabilir, değeri daha küçük olan, öğe daha şeffaf.

Diğer tüm tarayıcılar, 0,0 ila 1.0 arasındaki sayının değeri olarak alınabilecek standart CSS Opaklık özelliğini desteklemektedir, değeri küçültür, o kadar şeffaf olan öğe:

Deneyin

Hovering'de şeffaflık

Pseudo-Class: Hover, fare imlecini vurduğunuzda elemanların görünümünü değiştirmenizi sağlar. Bu olasılığından, fareyi gezinirken görüntünün şeffaflığını kaybedilmesi olasılığından yararlanacağız:

Deneyin

Şeffaflık arka plan

Bir öğeyi şeffaf yapmanın iki olası yolu vardır: yukarıda açıklanan ve RGBA formatındaki geçmişin rengini belirten opaklık özelliği.

Belki de RGB formatındaki renk gösterimi modeline zaten aşinasınız. RGB (kırmızı, yeşil, mavi - kırmızı, yeşil, mavi) - renkli sistem, kırmızı, yeşil ve mavi karıştırarak bir gölge tanımlama. Örneğin, metin için sarı renk ayarlamak için aşağıdaki reklamlardan birini kullanabilirsiniz:

Renk: RGB (255,255.0); Renk: RGB (% 100,% 100, 0);

RGB kullanılarak belirtilen renkler, alfa saydamlık kanalını kullanmanıza izin vermeden önce kullandığımız onaltılık değerlerden farklı olacaktır. Bu, elemanın arka planından alfa şeffaflığı ile birlikte, bunun altında bulunanların görüleceği anlamına gelir.

RGBA renginin duyurulması standart RGB kurallarına sahip sözdizimine benzer. Bununla birlikte, diğer şeylerin yanı sıra, RGBA olarak (RGB yerine) olarak ilan etmemiz ve 0.0 (tam saydamlık) ila 1 (tam opaklık) arasındaki renk değerinden sonra ek bir ondalık saydamlık değeri ayarlayacağız.

Renk: RGBA (255,255,0,0,5); Renk: RGBA (% 100,% 100, 0.0.5);

Opaklık ve RGBA özelliği arasındaki fark, opaklığın özelliğinin tüm elemanın tüm elemanına şeffaflık uygulanmasıdır, yani öğenin tüm içeriği şeffaf hale gelir. Ve RGBA, şeffaflığı elemanın bireysel bölümlerine ayarlamanızı sağlar (örneğin, yalnızca metin veya arka plan):

Vücut (ICPG) .Prim1 (genişlik: 400px; marjı: 30px 50px; arka plan rengi: #fffffff; sınır: 1px katı siyah; yazı tipi ağırlığı: kalın; opaklık: 0.5; filtre: alfa (opaklık \u003d 70); / * IE8 ve önceki sürümler için * / Text-Hizansa: Merkez;) .Prim2 (genişlik: 400px; marjı: 30px 50px; arka plan rengi: RGBA (255,255,255,0,5); sınır: 1px katı siyah; Yazı tipi ağırlık: kalın ; Metin Hizası: Merkez;) Deneyin »

Not: RGBA değerleri IE8 tarayıcısında ve önceki sürümlerde desteklenmez. Alpha kanallarıyla renk değerlerini desteklemeyen eski tarayıcılar için yedekleme seçeneğini bildirmek için, önce RGBA'nın değerine göre belirtmelisiniz: arka plan: RGB (255,255.0); Arka plan: RGBA (255,255,0,0,5);

Vlad Merzehevich

Elemanın saydamlığının etkisi, arka plan çizimi üzerinde iyi fark edilir ve farklı işletim sistemlerinde dağılımı var, çünkü şık ve güzel görünüyor. Web tasarımında, yarı saydamlık da uygulanır ve arka plan için ayarlanan Opaklık özelliği veya RGBA renk formatı nedeniyle elde edilir.

Degrade ile blok

Şekil 2'de gösterilen bloğu yapın. 1. Blok, başlık altında ve küçük bir işaretçi altında degrade bir arka plana sahip yarı saydam gradyan çerçevesi içerir. Sayfadaki arka plan sadece yarı saydamlığın netliği içindir, herhangi bir resim belirleyebilirsiniz. Minimum blok yüksekliği 100px'dir.

Katman Yarı saydam nasıl yapılır?

Elemanın şeffaflığı derecesini değiştirmek için, opaklık tarzı, 0 ila 1'den 1'e kadar bir değer ile kullanılır, burada 0 tam saydamlığa karşılık gelir ve 1, aksine, nesnenin opaklığı. Internet Explorer tarayıcısında, bu özellik çalışmıyor, bu nedenle, Spesifik olarak, CSS özelliklerine dahil olmayan bir özellik kullanmak gerekir. Örnek 1'de, tüm tarayıcılar için bir katman şeffaflığının nasıl oluşturulacağı gösterilmiştir.

Yarı saydam arka plan

Vlad Merzehevich

Doğru kullanımı ile kısmi şeffaflık, site tasarımına çok etkili bir şekilde görünüyor. Asıl şey, yarı saydam bloklar altında monofilik bir model değildir, ancak görüntü, bu durumda şeffaflığın farkedilebileceği durumda. Böyle bir etki farklı şekillerde elde edilir ve eski moda yöntemler de dahil olmak üzere her şeyi hatırlarsanız, PNG modelinin arka plan olarak kullanımı, damalı bir görüntü ve opaklık özelliği oluşturur. Ancak blokta yarı saydam bir arka plan yapmanız gereken bir ihtiyaç olduğunda, bu yöntemler tatsız bir taraf olarak ortaya çıkıyor. Küçük bir inceleme yapacağım, böylece neler tartışılacağını ve aynı zamanda bir yarı saydamlık etkisi oluşturmak için geleneksel olmayan seçeneklere aşina olmayan okuyucular için neler olur.

Bir tablo saydam nasıl kurulur ve hücrelerin bir parçası yok mu?

Elemanın şeffaflığını CSS3'teki saydamlığını değiştirmek için, Opacity özelliği sağlar, değeri 0 ila 1. arasında değişebilir. Sıfır, elemanın tam şeffaflığına ve ünitenin aksine, opaklığa karşılık gelir. Modern tarayıcılar, Internet Explorer tarayıcısı hariç, bu özellik ile tamamen doğru bir şekilde çalışıyorlar, bu nedenle, X'in 0 ila 100 arasında değişebileceği alfa değeri (Opacity \u003d x) ile özel bir filtre özelliği kullanmak zorundadır.

/* 06.07.2006 */

CSS Şeffaflığı (CSS opaklığı, JavaScript operity)

Şeffaflığın etkisi bu maddenin konusudur. CSS veya Javascript kullanarak Şeffaf HTML sayfalarının nasıl yapıldığını ve çapraz tarayıcının (farklı tarayıcılardaki aynı çalışma) nasıl elde edileceğini, Firefox, Internet Explorer, Opera, Safari, Konqueror tarayıcılarını göz önünde bulundurarak nasıl? Sonra lütfen eritin. Ayrıca, Hazır çözümü, JavaScript ile saydamlığın kademeli olarak değişmesine dikkat edin.

CSS opaklığı (CSS şeffaflığı)

CSS Opaklık Symbiosis

Symbiosis altında, istenen etkiyi elde etmek için bir CSS kuralında farklı tarayıcıların farklı tarzların birleşimini kastediyorum, yani. Çapraz tarayıcıyı uygulamak için.

Filtre: Progid: dximagetransform.microsoft.alpha (Opaklık \u003d 50); / * IE 5.5 + * / -MOZ-Opaklık: 0.5; / * Mozilla 1.6 ve altındaki * / -Khtml-opaklığı: 0.5; / * Konqueror 3.1, Safari 1.1 * // * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

Aslında, ilk ve son kurallara ihtiyaç duyulur, çünkü IE5.5 + ve tarayıcılar CSS3 opaklığını anlama ve ortadaki iki kural açıkça yapılmaz, ancak çok fazla değil ve önlenmez (kendileri gerekli olup olmadığına karar verin).

Javascript Opakity Symbiosis

Şimdi, yukarıda açıklanan farklı tarayıcıların özelliklerini dikkate alarak komut dosyası üzerinden şeffaflık kurmaya çalışalım.

Fonksiyon seteeEeTyypacity (Selemid, Nopacity) (VAR OpacityProp \u003d getOpAcityProperty (); var Elem \u003d document.getElementbyID (selemid); eğer (! Elem ||! OpacityProp) iade; // Belirtilen kimliğe sahip bir unsur yoksa veya tarayıcı, bilinen saydamlık kontrol yöntemlerinden hiçbirini desteklemezse Eğer (opacityprop \u003d\u003d "filtre") // Internet Exploder 5.5+ (NopAcity * \u003d 100; // Şeffaflık zaten kurulmuşsa, daha sonra filtreler koleksiyonundan değiştirin, aksi takdirde Style.Filter ile şeffaflık ekleriz. var olpha \u003d elem.Filters ["dximagetransform.microsoft.alpha"] || elem.filters.alpha; Eğer (olphaha) olpha.OpAcity \u003d Nopacity; elem.style.filter + \u003d "Progid: dximagetransform.microsoft.alpha (opakal \u003d" + nopacity + ")"; // "+ \u003d" kullanarak diğer filtreleri süpürmemek için ) BAŞKA. // Diğer tarayıcılar Elem.Style \u003d Nopacity; ) Function GetOpacityProperty () (eğer (eğer (typeof document.body.style.Opacity \u003d\u003d "string") // CSS3 uyumlu (MOZ 1.7+, Safari 1.2+, Opera 9) "Opaklık" i dönün; Başka bir şey varsa (belge.body.style.mozopacity \u003d\u003d "string") // Mozilla 1.6 ve Küçük, Firefox 0.8 "Mozopacity" i'ye dönün; Aksi takdirde (typeof document.body.style.khtmlOpacity \u003d\u003d "string") // konqueror 3.1, safari 1.1 "KHTMLOPACICACIT"; EĞER İF (Document.body.AppVersion && Navigator.AppVersion.Match (/ MSIE ([[\\ d] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ iade "Filtre"; Yanlış döndür; // saydamlık yok }

İşlev iki argüman alır: SELEMAD ELEMAN KİMLİĞİ, NOPACICA - CSS3 opaklığı tarzında saydamlığı belirten 0.0 ila 1.0 arasında gerçek bir sayı.

Bence, IE ile ilgili SeteLemTopaCity fonksiyon kodunun bir kısmını açıklamaya değer.

Var olpha \u003d elem.Filters ["dximagetransform.microsoft.alpha"] || elem.filters.alpha; Eğer (olphaha) olpha.OpAcity \u003d Nopacity; elem.style.filter + \u003d "Progid: dximagetransform.microsoft.alpha (opakal \u003d" + nopacity + ")";

Bir soru ortaya çıkabilir ve neden Elem.Style.Filter \u003d "..." mülkünü atama yoluyla şeffaflık kurarak neden (\u003d); ? "+ \u003d" Neden filtre özelliklerini dizenin sonuna eklemek için kullanılır? Cevap, diğer filtreleri "taramamak" için basittir. Ancak aynı zamanda, bu şekilde bir filtre eklerseniz, ikinci kez bir filtre eklerseniz, bu filtrenin önceden ayarlanmış değerlerini değiştirmez ve basit olmayan özellik dizisinin sonuna eklenecektir. Bu nedenle, filtre zaten takılıysa, element'e uygulanan filtrelerin toplanması yoluyla manipüle etmek gerekir: elem.Filters (ancak filtrenin henüz bir öğe atanmamışsa, bunu yönetmek imkansızdır. bu koleksiyondan). Koleksiyon elemanlarına erişim, filtre adı veya dizin tarafından mümkündür. Bununla birlikte, filtre, iki stilde, kısa bir IE4 tarzı veya kodda dikkate alınan IE5.5 + stilinde ayarlanabilir.

Eleman şeffaflığının pürüzsüz değişimi

Hazır çözümü. Opacity.js kütüphanesini kullanıyoruz.

fadeopacity (this.id, "OR1")"Onmouseout \u003d" fadeopacity.back (this.id)"SRC \u003d" IMG / Strawberry.jpg "genişliği \u003d" 100 "yükseklik \u003d" 80 "/\u003e fadeopacity (this.id, "OR1")"Onmouseout \u003d" fadeopacity.back (this.id)"SRC \u003d" / img / domato.jpg "width \u003d" 82 "yükseklik \u003d" 100 "/\u003e fadeopacity (this.id, "OR1")"Onmouseout \u003d" fadeopacity.back (this.id)"SRC \u003d" / img / sweet_cherry.jpg "width \u003d" 98 "yükseklik \u003d" 97 "/\u003e

Ana adımlar:

1. İşlev Kütüphanesini bağlıyoruz;
2. Yöntemi kullanarak kuralları belirlemek fadeopacity.addrule ();
3. Yöntemi diyoruz fadeopacity () Şeffaflığı ilk değerden finale kadar değiştirmek veya fadeopacity.back () Şeffaflık seviyesinin başlangıç \u200b\u200bdeğerine geri dönmek için.

Çiğnemek

Kütüphaneyi nasıl bağlayacağımı düşünüyorum, yukarıdaki örnekten görülebilir. Şimdi kuralların tanımını açıklamaya değer. Dokunsuz saydamlık değişikliği yöntemlerini çağırmadan önce, işlemin gerçekleştirileceği kuralların belirlenmesi gerekir: başlangıç \u200b\u200bve nihai saydamlığı tanımlamak için gereklidir ve istenirse, etkilenen gecikme parametresini belirtin. Şeffaflık değişim işleminin hızı.

Yöntem kullanılarak kurallar belirlenir Fadeopacity.addrule

Sözdizimi: FADEOpAcity.Addrule (SRULENAME, NSTArtopacity, NFinishopacity, NDALAY)

Argümanlar:

• sRULENAME - Kuralın adı keyfi olarak ayarlanır;
• nStartopacity ve NFinishopacity - İlk ve nihai şeffaflık, 0.0 ila 1.0 arasında değişen sayılar;
• ndelay - milisaniyede gecikme (isteğe bağlı argüman, varsayılan olarak 30'dur).

Selemid'in bir öğe kimliği ve SRulename kural adı olduğu Fadeopacity yöntemleri (Selemid, Srulename) ile şeffaflık faudlamasını arayın. Şeffaflığı iade etmek için, FadeOpacity.Back (SELEMID) yöntemi geri dönmek için kullanılır.

: Kolay saydamlık değişikliği için Hover

Ayrıca, basit bir şeffaflık değişikliği için (ancak yavaş yavaş değiştirilmediğini), sözde seçici uygundur. : HoverBu, fareler anında eleman için stilleri tanımlamanızı sağlar.

Lütfen resmin A elementinin içine yerleştirildiğini unutmayın. Gerçek şu ki, Internet Explorer'ın 6 sürümüne kadar olan, sahte seçiciyi anlar: Hover, sadece Referansla ve herhangi bir elemana değil, CSS'de olması gerektiği gibi (IE7'de, konum sabitlenir).

IE'de şeffaflık ve servisli metin

Windows XP'nin piyasaya sürülmesiyle, bir ekran fontlarının düzleştirilmesi yöntemle belirdi Temiz tip, onunla birlikte, yani bu yumuşatma yöntemini kullanırken yan etkileri. Bizim durumumuzla ilgili olarak, şeffaflık Metin öğesine uygulanırsa, ClearType pürüzsüzleştirme yöntemi etkinleştirildiğinde, metin normalde görüntülenir (kalın metin - Cesur.Örneğin, çiftler, çeşitli eserler, örneğin, serebrallar halinde, servis edilen metin şeklinde de görünebilir). IE için durumu düzeltmek için bir arka plan rengini, CSS özelliğini ayarlamanız gerekir. arka plan rengi.Şeffaflığın uygulandığı eleman. Neyse ki IE7 böcek ortadan kaldırıldı.

Sayfa öğelerinin şeffaflığını kontrol etmek için, CSS Opaklık özelliği kullanılır. Şartnameye göre, her türlü düğümler için geçerlidir ve tüm modern tarayıcılarda desteklenir. Bununla birlikte, ilginç bir tasarım yaratabilir veya kullanıcı ile uygun bir etkileşim etkileşimi uygulayabilirsiniz.

Olası değerler

CSS'deki opaklık özelliğinin sözdizimi şöyle görünür:

Seçici (Opaklık: 0;) Seçici (Opaklık: 0.4;)

Giriş, 0 ila 1 aralığında sayısal değerler ile kabul edilir. Parametre, birimin bir parçası olabilirken, nokta CSS'de bir bütün ve kesirli parçanın bir ayırıcı olarak kullanılır.

Sıfır şeffaflığı olan bir unsur görünmez hale gelir, ancak hala sayfadaki yerini işgal etmeye devam eder ve kullanıcıyla etkileşime girme yeteneğini kaydeder.

Mülkiyetin değeri sıfırdan farklı ise, gerçek saydamlık belirli bir üst sınırın yüzdesi olarak hesaplanır. Her zamanki durumda, Opaklık: 1, elemanın opaklığını belirler.

Bağlı ortaklıkların şeffaflığı

Bununla birlikte, eğer elemanın şeffaflığı birinden farklı olan bir ebeveyni varsa, hesaplama değişir. Algen, atalarından herhangi birinden daha "daha az şeffaf" olamaz. Ebeveyn bloğunun CSS özelliklerinin değeri, bağlı ortaklığın şeffaflığının üst sınırına dönüşür.

Ebeveyn (Opaklık: 0.7;) Çocuk (Opaklık: 1;)

Böyle bir durumda, çocuk elemanı opaklık değerinin birine eşit olmasına rağmen,% 30 saydam olacaktır.

Kullanma örnekleri

Örnek 1. Transupercy. Temel blok bloğun hedef öğenin altında görünmesi gerekir.

Hedef (Arka Plan: Siyah; Opaklık: 0.5;)

Yarı saydam sadece hedef bloğun arka planı değil, aynı zamanda metni de olur.

Örnek 2. Dinamik saydamlık kontrolü. Hedef ünitenin CSS opaklık özelliğinin değeri, imleç uçurulduğunda değişir.

Hedef (Opaklık: 0.2;) .Target: Hover (Opaklık: 1;)

Dinamik şeffaflık

Son örnek, şeffaf elemanların, imleci gezinmek gibi sayfa olaylarına yanıt vermeye devam ettiğini göstermektedir. Bu, CSS Opacity özelliğini yönetmek için JavaScript kullanmanızı ve ayrıca ekran modunu sorunsuzca değiştirmek için geçiş ve animasyon mekanizmalarını uygulayabilirsiniz.

Şeffaflığa komut dosyasından erişmek için, belirli bir öğenin stil nesnesine başvurmanız gerekir.

// Şeffaflık Varlığının Mevcut Değerini Alma Opacity \u003d Element.Style.OpAcity; // Yeni değer öğesini ayarlayın.Style.OpAcity \u003d 0.4;

Ünitenin pürüzsüz kaybolması, geçişin CSS özellikleri kullanılarak uygulanabilir:

Öğe (Opaklık: 0.1; Geçiş: Opaklık 1000ms;) Eleman: Hover (Opaklık: 0.8; Geçiş: Opaklık 2000ms;)

Şimdi fareyi gezinirken element düğümü, şeffaflığı bir saniye boyunca% 10 ila 80 arasında değişir ve imlecin ayrılırken - kaynak değerini iki saniye doldurun.

Geçiş mekanizması ile birlikte CSS opaklık özelliği, güzel efektler oluşturmanıza olanak sağlar.

Opaklık yerine alfa kanalı

Opaklık mekanizmasının CSS'deki ana incelikleri:

• eylemi sadece blok arka plana değil, aynı zamanda net bir şekilde ayrılabilecek olan metin içeriğinde de geçerlidir;
• kız eşyaları ebeveynlerden daha az şeffaf olamaz.

Bu etkiler kademiyetçinin ömrünü zorlaştırırsa, opaklık yerine, RGBA veya HSLA formatındaki değerini tanımlayarak basitçe saydam bir arka plan kullanmalısınız.

Bu derste, böyle analiz edeceğiz. CSS. Özellikleri - opaklık ve Rgba. Emlak Opaklık Sadece elementlerin şeffaflığı için yanıtlar ve fonksiyon Rgba - Renk ve şeffaflık için, alfa kanalının şeffaflığının değerini belirtirseniz.

CSS Şeffaflık Opaklık

İçin dijital değer opaklık Sıfırın tam saydamlığın olduğu ve aksine, sıfırın tam saydamlığın olduğu ve ünite mutlak bir opaklıktır. Örneğin,% 50 saydamlığı görmek için, 0.5 değeri ayarlamanız gerekir. Aklında tutmanız gerekiyor opaklık Ebeveynin tüm çocuk elemanları için geçerlidir. Ve bu, yarı saydam bir arka plandaki metnin aynı zamanda yarı saydam olduğu anlamına gelir. Ve bu çok önemli bir dezavantaj, metnin çok iyi tahsis edilmedi.

Ekran görüntüsünde, siyah metnin mavi arka plan olarak aynı yarı saydam haline geldiği açıkça görülmektedir.

Div (
Arka plan: URL (görüntüler / yourimage.jpg); / * Resim arka plan * /
Genişlik: 750px;
Yükseklik: 100px;
Marj: Otomatik;
}
.Blue (
Arka plan: # 027AV4; / * Yarı saydam arka plan rengi * /
Opaklık: 0.3; / * Yarı saydam arka planın değeri * /
Yükseklik: 70px;
}
H1 (
Dolgu: 6px;
Yazı Tipi ailesi: Arial Black;
Yazı Tipi Ağırlığı: Bolder;
Yazı tipi boyutu: 50px;
}

RGBA formatında CSS şeffaflığı

Kayıt rengi için format Rgbamülk için daha modern bir alternatiftir opaklık. R (kırmızı), g (yeşil), b (mavi) - SO: kırmızı, yeşil, mavi. Son Mektup A. - Saydamlığı belirtilen alfa kanalı anlamına gelir. Rgba Aksine Opaklık Çocuk elemanlarını etkilemez.

Şimdi kullanarak örneğimizi düşünelim Rgba. Bu satırları stillere değiştirin.

Arka plan: ## 027AV4; /* Arka plan rengi */
Opaklık: 0.3; / * Yarı saydam arka planın değeri * /

sonraki bir satır için

Arka plan: RGBA (2, 127, 212, 0.3);

0.3 saydamlığın değerini, her iki yöntemle de çakışıyor nasıl görüyorsunuz?

RGBA ile bir örneğin sonucu:

İkinci ekran görüntüsü ilkden çok daha iyi görünüyor.

Blokların yarı saydam geçmişi ile oynamak, ilginç etkilerin sitesinde başarabilirsiniz. Bu yarı saydam blokların fotoğraflar gibi çeşitli resimlerin üzerinde yürüdükleri önemlidir. Sadece bu durumda etki farkedilir. Bu resepsiyonun uzun zamandır tasarımı, hiç kimseden önce bile uygulandı. Css3Tamamen grafik programlarında uygulandı.

Müşteri, düzenin iyi görünmesini gerektiriyorsa, tarayıcının eski sürümlerinde Internet Explorer.Sonra mülk ekle filtre. Ve kodun geçerliliğine maruz kalmamak için yorum yapmayı unutmayın.

Çıktı

Biçim Rgba Hariç tüm modern tarayıcıları destekleyin Internet Explorer.. Hala çok önemli Rgba Esnek, yalnızca bağlı ortaklıkları etkilemeden belirli bir belirtilen öğeye etki eder. Kameracun için daha uygun olduğu açıktır. Seçimim kesinlikle format lehine Rgba almak için cSS'de şeffaflık.

Malzemenin ve daha büyük netliklerin daha iyi bir şekilde konsolidasyonu için, geçmenizi öneririm.