CSS özelliği 3 opaklık sitenin bu veya bu öğesini şeffaf hale getirmenize olanak tanır.

Elemanın şeffaflık derecesi, değere göre belirlenir. 0 önceki 1 nerede 0 - tamamen şeffaf 1 - hiç opak .. Örneğin, değer 0.5 özellikleri opaklık görüntüye uygulanması, bu görüntünün yarı saydam olması gerektiği anlamına gelir.

IE'de Şeffaflık

Tarayıcı Internet Explorerözellikleri desteklemiyor opaklık dokuzuncu sürüme kadar, ancak şeffaflık derecesini ayarlayabileceğiniz kendi filtresi vardır:

filtre: alfa(opaklık=50)

Anlam opaklık filtre için internet tarayıcısı Explorer farklı olabilir 0 - tamamen şeffaf 100 - opak

Bu menünün blokları, IE'de de üzerine gelindiğinde yarı saydam olacaktır!

ev
site haritası
bir fil satın al
fil satmak
fil kirala

Ön ekler.

Bu konuda, prensip olarak, şeffaflık bölümü bitirilebilir, ancak size sözde hakkında daha fazla bilgi vermek istiyorum. satıcı önekleri.. bu yoldaşların bu bölümle pek bir ilgisi yok, ancak CSS3 öğrenmeye devam ettikçe, daha sık karşılaşacaklar ve bir yerlerde onlardan bahsetmemiz gerekiyor - bu yüzden size burada anlatacağım.

Bu nedenle, satıcı önekleri, resmi olarak CSS belirtiminin parçası olmayan deneysel özellikler için tarayıcılar tarafından kullanılan CSS özelliklerine özel öneklerdir.

CSS 3 spesifikasyonunun hala geliştirme aşamasında olduğunu ve resmi olarak bu eğitimde açıklanan özelliklerin doğada mevcut olmadığını, ancak tarayıcıların bunları kendi tehlikeleri ve riskleri altında aktif olarak kullandıklarını hatırlıyoruz.

Neden kendi sorumluluğunuzda? Evet, çünkü CSS 3 spesifikasyonu resmi olarak onaylandığında, içinde açıklanan özelliklerin etkileri bakımından tarayıcılar tarafından halihazırda kullanılan aynı ada sahip özelliklerden farklı olması mümkündür. Bir özelliği belirlemek için CSS 3 spesifikasyon geliştiricilerine bir göz atalım. opaklık bloğun şeffaflık derecesi olarak değil, örneğin gölgelenmesi veya titremesi (elbette saçmalık yazıyorum), o zaman milyonlarca zaten gösterecek yüklü tarayıcılar hangisi için opaklık bu şeffaflık mı?

Ya da diyelim ki tarayıcı geliştiricileri kendi mülklerini buldular - hiç kimsenin hiçbir yerinde olmayan bir yenilik, ancak böyle bir özelliğe sahip bir belge, şartnamede böyle bir özellik olmadığı için geçerlilik kontrolünden geçmiyor.

Bu ve diğer nedenlerle, tarayıcılar, resmi belirtimin parçası olmayan özelliklerin başında önekler kullanır. Her tarayıcının “-” işaretiyle başlayan kendi öneki vardır, özelliğin başındaki bu işaret ve ayrıca bu “_” işareti, CSS 2.1 spesifikasyonuna göre, özelliğin belirli CSS uzantıları için ayrıldığını gösterir. tarayıcılar.

İşte en popüler tarayıcılar ve önekleri:

Tarayıcı	Önek
Opera	-Ö-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 ve üzeri	-Hanım-
Safari sürüm 3'e kadar, Konqueror	-khtml-
Safari 3 ve üzeri, Google Chrome	-webkit-

Ön ekleri kullanmak çok kolaydır, sadece bazı CSS özelliklerini alın ve istediğiniz öneki, örneğin özelliğin yerine değiştirin. opaklık vekil -moz- ortaya çıkıyor: -moz-opaklık

Her ne kadar aslında benim ifadem " önekleri kullan" yanlış! aslında hiçbir yerde ikame yoktur, sadece bir özellik vardır opaklık, var mı -moz-opaklık ve bunlar aynı işlevi yerine getirmek zorunda olmayan iki farklı özelliktir!! - anlaşılmalıdır.

Ayrıca, belirli tarayıcıların belirli sürümlere kadar yalnızca kendi önekleriyle CSS özelliklerini destekleyebileceği de anlaşılmalıdır (yine, kendimi doğru ifade etmiyorum, kendi özelliklerimin tarayıcı CSS uzantıları olduğunu söylemek doğru) veya yapabilirler. başlangıçta geliştirilmiş spesifikasyonlara bile güvenir. – Bu ders kitabında her özel durumu ayrı ayrı ele alacağız.

Şeffaflıkla ilgili bu fasıl ile ilgili olarak, şunu belirtmek gerekir ki, Firefox tarayıcısı 3.5 ve öncesi kendi mülklerini kullanır -moz-opaklık ve 1.1 sürümünden önceki Safari tarayıcısı bu özelliği kullanır -khtml-opaklık .

Örneğimizi tamamen tarayıcılar arası hale getirmek için koda birkaç satır daha eklememiz gerekiyor:

Gördüğünüz gibi, önekler kodu önemli ölçüde uzatır ve belirli özelliklerle yalnızca kendi öneklerini kullanarak çalışmak isteyen tarayıcıların sürümleri, özellik durumunda olduğu gibi oldukça eskiyse, kullanımları her zaman haklı değildir. opaklık, o zaman onları belirtemezsiniz .. - elbette bu kötü bir tavsiye olsa da ..

Şimdi bazı yararlı ipuçları için..

Kullanılan özelliğin sitenin performansını, okunabilirliğini ve kullanılabilirliğini büyük ölçüde etkileyebileceği durumlarda her zaman önekleri kullanın (tabii ki bir veya başka bir tarayıcı onlarsız yapamazsa). Site tasarımındaki herhangi bir küçük şeyin çalışmaması bir şeydir ve örneğin site menüsünün çalışmaması veya tarayıcının çalışması nedeniyle sitedeki metni okumanın imkansız olması oldukça başka bir şeydir. bazı mülkleri desteklemez, bunun yerine kendi benzerini kullanır.

CSS'de bir öğenin şeffaflığını değiştirmenin üç yolu vardır:
opacity özelliğini kullanarak,
rgba() işlevini kullanarak,
hsla() işlevini kullanarak.

1. Opaklık özelliği

Opaklık özelliği, bir web sayfasının herhangi bir öğesini kısmen veya tamamen saydam yapmanıza olanak tanır. Bu özellik, ayarlanan öğelerin şeffaflığını değiştirir. arka plan görüntüsü(resim) veya arka planı bir renk veya gradyan ile ayarlayın. Opaklık özelliği uygulanan öğenin içinde başka öğeler varsa, opaklıklarını da değiştirirler.
Opaklık özelliği 0 (tamamen şeffaf) ile 1 (opak) arasında değerler alır, örneğin:

H1 (renk: #CD6829;) div (arka plan: #CDD6DB; opaklık: .3; )
Pirinç. 1. Opaklık kullanan öğelerin şeffaflığı

2. RGB() işlevi

RGBA renk modeli, gerekli oranlarda karıştırılarak bir renk tonu oluşturur. kırmızı, Yeşil ve maviçiçekler ve alfa kanalı (Alfa) rengin şeffaflık derecesinden sorumludur. Opaklık özelliğinden farklı olarak, diğer öğeleri içeren bir kutu için rgba() işlevi yalnızca kutunun opaklığını değiştirir.

Pirinç. 2. RGB renk modeli h1 (renk: #CD6829;) div (arka plan: rgba(205, 214, 219, 0.3);)
Pirinç. 3. rgba() işlevini kullanan öğelerin şeffaflığı

3. hsl() işlevi

Parametreleri şu anlama gelen hsla() işlevi ton (ton), Doyma, parlaklık ve alfa kanalı (Alfa), ayrıca yarı saydam bir renk ayarlamanıza olanak tanır.

Renk tonları, renk tekerleğinden karşılık gelen değer kullanılarak yüzde olarak belirtilir. Dairenin kendisi, sınırları üzerinde ana renklerin bulunduğu sektörlere ayrılmıştır:

0/360° - kırmızı
60° - sarı
120° - yeşil
180° - mavi
240° - mavi
270° - mor
300° macenta.

Siyah almak için ton, doygunluk ve parlaklık değerlerini sıfır - hsla(0, 0%, 0%, 1) olarak ayarlamanız gerekir. Beyaz, %100 parlaklıkta hsla(0, %0, %100, 1) elde edilir ve gri, sıfır değer doygunluk hsla(0, 0%, 50%, 1) .

CSS3, sayfa öğelerine saydam bir efekt uygulamak için opaklık özelliğini tanımlar. Bu özelliğin değeri 0.0 ile 1.0 arasında bir sayıdır. Sıfır değeri, öğeyi tamamen şeffaf hale getirirken, bir değeri onu tamamen opak yapar. Özellik, herhangi bir sayfa öğesine uygulanabilir.

Img1 ( opaklık: 0.2; ) .img2 ( opaklık: 0.5; ) .img3 ( opaklık: 1.0; )

Saydamlığı komut dosyası aracılığıyla ayarlamak için: object.style.opacity

Eski Mozilla ve Firefox 0.8, bu özellik için kendi adlarını kullanır: -moz-opacity Komut dosyası aracılığıyla şeffaflığı ayarlamak için şunu kullanın: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - KHTML motoru üzerine kurulu, şeffaflığı kontrol etmek için özelliği kullanın: -khtml-opacity Şeffaflığı komut dosyası aracılığıyla ayarlamak için şunu kullanın: object.style.KhtmlOpacity

Safari, sürüm 1.2'den beri CSS3 opaklığını kullanıyor, ancak 3.1 sürümünden daha eski olan Konqueror, -khtml-opacity özelliğini desteklemeyi bıraktığından, CSS3 opaklığı için destek sunmadı.

Internet Explorer 5.5 sürümünden ve bugünün en yeni sürümüne kadar İnternet sürümü Explorer 7, Alpha DirectX filtresi aracılığıyla şeffaflık uygular. Bu filtrenin 0 ila 100 aralığında (0.0 ila 1.0 değil) bir şeffaflık değeri kullandığını belirtmekte fayda var. Ayrıca, filtrenin yalnızca height veya width veya position özelliği mutlak olarak ayarlanmış veya writeMode tb-rl olarak ayarlanmış veya contentEditable true olarak ayarlanmış bir öğeye uygulanabileceğini de not ediyorum.

Örnek (opaklığı yarıya ayarlayın):

Img1 ( filtre:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ sözdizimi (tercih edilen) */ .img2 ( filtre: alpha(opacity=50); ) /* IE4 sözdizimi */ Hedef şeffaflığı komut dosyası aracılığıyla ayarlayın, şunu kullanın: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(parametre dizesi)"

W3C şeffaflığına benzer şeffaflık elde etmek için parametre dizesi olarak "opacity=sayı 0'dan 100'e" kullanın.

Tüm tarayıcılarda çalışması nasıl yapılır:

filtre:progid:DXImageTransform.Microsoft.Alpha(opaklık=50); /* IE 5.5+*/ -moz-opaklık: 0.5; /* Mozilla 1.6 ve altı */ -khtml-opaklık: 0.5; /* Konqueror 3.1, Safari 1.1 */ opaklık: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

javascript

function 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 if (opacityProp=="filter") işlevi tarafından bilinen yöntemlerden herhangi birini desteklemiyor if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Saydamlık zaten ayarlanmışsa, filtreler aracılığıyla değiştirin toplama, aksi takdirde style.filter aracılığıyla şeffaflık ekleyin 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+")"; // Diğer filtrelerin üzerine yazmamak için "+=" ) else // Diğer tarayıcılar elem.style = nOpacity; ) function getOpacityProperty() işlevini kullanın ( if (typeof document.body.style.opacity == "string") // CSS3 uyumlu (Moz 1.7+, Safari 1.2+, Opera 9) "opaklık" döndürür; başka if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 ve öncesi, Firefox 0.8 "MozOpacity" döndürür; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 "KhtmlOpacity" döndürür; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ "filtre" döndürür; yanlış döndür; // şeffaflık yok )

Bir görev

Tüm içeriği yarı saydam olan bir blok öğesi yapın.

Çözüm

Bir öğenin saydamlık derecesini değiştirmek için, stil özelliği opaklığı, 0'dan 1'e kadar bir değerle kullanılır; burada 0, tam saydamlığa karşılık gelir ve 1, tam tersine, nesnenin opaklığına karşılık gelir. Internet Explorer'da bu özellik çalışmaz, bu nedenle, CSS belirtiminin parçası olmayan bir özellik olan filtreyi özel olarak kullanmanız gerekir. Örnek 1, tüm tarayıcılar için bir katmanın saydamlığının nasıl ayarlanacağını gösterir.

Örnek 1. Yarı saydam katman

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sonuç bu örnekŞek. bir.

Pirinç. 1. Safari tarayıcısında yarı saydam katman

filter özelliği, yalnızca boyutlardan (width veya height) en az birinin ayarlandığı veya öğenin şu şekilde ayarlandığı öğelere saydamlık ekler. mutlak konumlandırma(konum: mutlak).

Ayrıca saydamlığın, alt öğeler de dahil olmak üzere katmanın tüm içeriğini etkilediğini ve opaklığı değiştirerek onlar için opaklık düzeyini artıramayacağınızı unutmayın. Katmanın saydamlığının 0,7 olarak ayarlandığı örnek 1'de, katmanın içindeki metin aynı değeri alır. Daha az ayarlanmasına izin verilir, ancak metin 0,7 şeffaflık değerini aşamaz.

CSS opacity özelliği, html'deki öğelerin (resimler, metin, bloklar) şeffaflığından sorumludur.

CSS Sözdizimi

Değerin 0.0 ile 1.0 aralığında gerçek değerler alabileceği yer. 1.0 değeri şeffaflık olmadığı anlamına gelir (varsayılan).

Örnek 1. html'de şeffaf resim

İlk görüntü şeffaflık olmadan, ikincisi 0,5 şeffaflıkla oluşturulur.

Eleman yarı saydamlığı

Fareyle üzerine gelindiğinde görüntüyü yarı saydam yapmak!

Demoİndirme kaynakları

İlginiz için teşekkür ederiz!

Sonraki makale
Kaydırılabilir bir div nasıl oluşturulur?