Bazen yapmak gerekli hale gelir şeffaf arka plan sayfadaki belirli bir blok için. Bu efekt, formatta şeffaf bir arka plan görüntüsü oluşturarak elde edilebilir. * .png ve mülk aracılığıyla ayarlama arkaplan: url (“./ images / fon.png”);.

OPACITY özelliğini kullanma

CSS ile yapılabildiğinde neden bu kadar karmaşık? Sayfada bir ana blok oluşturalım ( sayfa) ve iç içe blok ( blok), şeffaflığı belirleyeceğiz. Tarayıcılar arası uyumluluk şu şekilde sağlanır: Internet Explorer için özellik - filtre: alfa (opaklık \u003d 50) (0 ile 100 arasında şeffaflık değeri), CSS3 standardını destekleyen tarayıcılar için - opaklık: 0.5 (0,0 ile 1,0 arasında değişen bir sayı).

HTML Kodu:

Sonuç:

Blok için şeffaf arka plan

Gördüğünüz gibi şeffaflık tüm çocukları kapsıyor.

Blok için şeffaf arka plan

-de DIV sınıfla blok ve ebeveynlerinin şeffaflık değerini aşamazlar. Yani bu bloktaki her şey şeffaf hale gelir. Ya şeffaf arka planı yalnızca div için bırakmak isterseniz?

BACKGROUND-COLOR özelliğini kullanma

CSS stil sayfasında bazı değişiklikler yapmamız gerekiyor, yani blok yerine DIV sınıfla blok Emlak opaklık mülk başına arka plan rengi.

Div.block (genişlik: 260px; yükseklik: 140px; margin-top: 79px; margin-left: 94px; border: 1px düz # 333333; / * yalnızca şeffaf arka plan DIV.block * / arka plan rengi: rgba (255, 255 , 255, 0.5); / * Arka plan rengi, şeffaflık 0.5 * /)

Sonuç:

Blok için şeffaf arka plan

Renk ve arka plan için kullanılan yukarıdaki örnekte rGBA biçimi ... İlk üç harf nerede duruyor kırmızı, yeşil, mavi (kırmızı, yeşil, mavi), ikincisi sembolize eder alfa kanalı (a) ve ayarlar şeffaflıkb öğesi 0.0 önce 1.0 .

Arka plan rengi: rgba (r, g, b, a);

Renk bileşeninin değeri, harfler yerine köşeli parantez içine alınır, örneğin herhangi bir grafik düzenleyicide görüntülenebilir. Paint.Net (ekran görüntüsü). Son değer a şeffaflığı ayarlar ve özellik değeriyle eşleşir opaklık.

http://cp77.comxa.com/verstka/css-transparent-fon

CSS özelliği opaklık öğenin opaklığını ayarlar. Opaklık, içeriğin saydamlığın tersine bir öğenin arkasına gizlenme derecesidir.

Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. Etkileşimli örnekler projesine katkıda bulunmak isterseniz, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir istek gönderin.

opaklık, değer çocuklar tarafından miras alınmasa bile, içeriği dahil olmak üzere öğenin tamamı için geçerlidir. Bu nedenle, bir öğe ve onun soyundan gelenler, birbirlerine göre farklı opaklıklara sahip olsalar bile, öğenin arka planına göre aynı opaklığa sahiptir.

1 dışında bir değerle opaklığın kullanılması, öğeyi yeni bir kaplama bağlamına yerleştirir.

Örnekleri

Temel örnek

div (arkaplan rengi: sarı;) .light (opaklık: 0.2; / * Arka planda zar zor görünen metin * /) .medium (opaklık: 0.5; / * Metin arka planda daha görünür * /) .heavy (opaklık: 0.9 ; / * Metin arka planda çok net * /)

Farklı opaklık: hover

img.opacity (opacity: 1; filter: alpha (opacity \u003d 100); / * IE8 ve altı * / zoom: 1; / * IE 7 ve altında "hasLayout" tetikleyiciler * /) img.opacity: hover (opaklık: 0..png "alt \u003d" (! LANG: MDN logosu" width="128" height="146" class="opacity"> !}

Erişilebilirlik sorunları

Metnin opaklığı ayarlanabilirse, metnin rengi ile metnin yerleştirildiği arka plan arasındaki kontrast oranının, görme bozukluğu olan kişilerin sayfa içeriğini okuyabilmesi için yeterince yüksek olduğundan emin olmak önemlidir.

Renk kontrast oranı, metnin parlaklığı, ayarlanan opaklık ve arka plan rengi değeri ile karşılaştırılarak belirlenir. Mevcut Web İçeriği Erişilebilirlik Yönergelerine (WCAG) uymak için metin içeriği 4.5: 1 oran ve başlıklar gibi daha büyük metinler için 3: 1 gerektirir. Büyük metin 18.66 piksel veya daha büyük ya da 24 piksel veya daha büyük olarak tanımlanır.

Teknik Özellikler

Başlangıç \u200b\u200bdeğeri	1.0
İçin geçerlidir	tüm unsurlar
Miras	hayır
Görüntüle	görsel
Değer işleme	belirtilen değer, aralığa kırpıldı
Animasyon türü	kayan nokta sayıları olarak enterpolasyonludur. "\u003e sayı
Kanonik düzen	biçimsel dilbilgisi ile tanımlanan benzersiz belirsiz düzen

Tarayıcı desteği

Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak isterseniz, lütfen https://github.com/mdn/browser-compat-data sayfasına bakın ve bize bir çekme isteği gönderin.

GitHub'da uyumluluk verilerini güncelleyin

	Bilgisayarlar						Cep Telefonu
	Krom	Kenar	Firefox	Internet Explorer	Opera	Safari	Android web görünümü	Android için Chrome	Android için Firefox	Android için Opera	İOS'ta Safari	Samsung İnternet
opaklık	Krom Tam destek 1	Kenar Tam destek 12	Firefox Tam destek 1 Tam destek 1 Destek yok 1 - 3.5 Ön ek ile Ön ek ile Satıcı öneki gerektirir: -moz-	IE Tam destek 9	Opera Tam destek 9	Safari Tam destek 2 Tam destek 2 Destek yok 1.1 - 2 Ön ek ile Ön ek ile Satıcı öneki gerektirir: -khtml-	WebView Android Tam destek 1	Chrome Android Tam destek 18	Firefox Android Tam destek 4	Opera Android Tam destek 10.1	Safari iOS Tam destek 1	Samsung İnternet Android Tam destek Evet
Yüzde opaklık değerleri desteği	Krom Tam destek 78	Edge Destek yok Hayır	Firefox Tam destek 70	IE Destek yok Hayır	Opera Destek yok Hayır	Safari Destek yok Hayır	WebView Android Tam destek 78	Chrome Android Tam destek 78	Firefox Android Destek yok Hayır	Opera Android Destek yok Hayır	Safari iOS Destek yok Hayır	Samsung Internet Android Destek yok Hayır

Efsane

Tam destek Tam destek Destek yok Destek yok Kullanılacak satıcı öneki veya başka bir ad gerektirir. Kullanılacak satıcı öneki veya başka bir ad gerektirir.

CSS 3 özelliği opaklık sitenin bir veya daha fazla öğesini şeffaf yapmanıza olanak tanır.

Bir elemanın şeffaflığı şu değerden belirlenir: 0 önce 1 Nerede 0 - tamamen şeffaf a 1 - hiç opak .. Yani örneğin değer 0.5 özellikleri opaklık resme uygulanması, bu resmin yarı saydam olması gerektiği anlamına gelir.

IE'de şeffaflık

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

filtre: alfa (opaklık \u003d 50)

Değer opaklık Internet Explorer için tarayıcı filtresi aşağıdakilerden farklı olabilir: 0 - tamamen şeffaf 100 - opak

Bu menünün blokları da IE'de fareyle üzerine gelindiğinde yarı şeffaf olacaktır !!

ev
site haritası
Fil satın alın
Bir fil sat
Bir fil kiralayın

Ön ekler.

Bu, prensip olarak, şeffaflık bölümünü bitirebilir, ancak size sözde sözde daha fazla bilgi vermek istiyorum. satıcı önekleri.. bu yoldaşların bu bölümle özel bir ilişkisi yoktur, ancak, CSS3'ü öğrenmenin ilerleyen aşamalarında, onlar ile daha sık karşılaşılacak ve bir yerlerde onlardan bahsetmeniz gerekecek - bu yüzden size burada anlatacağım.

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

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

Neden kendi tehlikeniz ve riskiniz altında? Evet, çünkü CSS 3 spesifikasyonu resmi olarak onaylandığında, içinde açıklanan özelliklerin eylemlerinde tarayıcılar tarafından zaten kullanılan aynı ada sahip özelliklerden farklı olma olasılığı vardır. İşte marka, diyelim ki CSS 3 spesifikasyonunun geliştiricileri bir mülk belirlediler opaklık bloğun şeffaflık derecesi olarak değil, örneğin gölgelenmesi veya titremesi (tabii ki saçma yazıyorum) olarak, bu daha sonra milyonlarca yüklü tarayıcı tarafından görüntülenecektir. opaklık şeffaflık mı?

Veya tarayıcı geliştiricilerinin kendi mülklerini bulduklarını varsayalım - başka hiç kimsenin ve hiçbir yerde sahip olmadığı bir yenilik, ancak böyle bir özelliğe sahip bir belge, şartnamede böyle bir özellik olmadığı için doğrulama kontrolünü geçemez.

Bu ve diğer nedenlerle, tarayıcılar, resmi spesifikasyonun parçası olmayan özelliklerin başında önekler kullanır. Her tarayıcının "-" işaretiyle başlayan kendi öneki vardır, bu işaret mülkün başlangıcında yer alır ve ayrıca bu "_" işareti, CSS 2.1 spesifikasyonuna göre, mülkün belirli tarayıcıların CSS uzantıları için ayrıldığı anlamına gelir.

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

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, bazı CSS özelliklerini alıp bunun için gerekli öneki, örneğin bir özelliğe değiştirmek yeterlidir. opaklık vekil -moz- ortaya çıkıyor: -moz-opaklık

Aslında benim ifadem " önekleri kullan"Hata! aslında hiçbir şey hiçbir yerde ikame edilmez, sadece bir mülk opaklık , var mı -moz-opaklık ve bunlar aynı işlevi gerçekleştirmesi gerekmeyen iki farklı özelliktir !! - bu anlaşılmalıdır ..

Ayrıca, belirli sürümlere kadar olan belirli tarayıcıların CSS özelliklerini yalnızca kendi önekleriyle destekleyebileceği (yine, kendi özelliklerimi yanlış ifade ediyorum - tarayıcı CSS uzantıları) veya başlangıçta gelişmiş özelliklere bile güvenebilecekleri anlaşılmalıdır. - Bu ders kitabında her vakayı ayrı ayrı ele alacağız.

Şeffaflıkla ilgili bu bölüme gelince, Firefox 3.5 ve önceki sürümlerin kendi mülklerini kullandığına dikkat edilmelidir. -moz-opaklık ve 1.1 sürümünden önceki Safari tarayıcısı özelliğini kullanır -khtml-opaklık .

Örneğimizi tamamen çapraz tarayıcı yapmak için, koda birkaç satır daha eklememiz gerekiyor:

Gördüğünüz gibi, önekler kodu önemli ölçüde uzatır ve yalnızca belirli özelliklerle çalışmak isteyen tarayıcıların sürümleri, mülkte olduğu gibi yeterince eski ise, kullanımları her zaman haklı değildir opaklık , o zaman bunları belirtemezsiniz .. - Tabii 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 önekler kullanın (tabii ki belirli bir tarayıcı bunlar olmadan yapamazsa). Sitenin tasarımındaki herhangi bir küçük şeyin çalışmaması ve tamamen farklı olması bir şeydir, örneğin site menüsü çalışmadığında veya tarayıcının bazı özellikleri desteklememesi ve bunun yerine kendi benzerini kullanması nedeniyle sitedeki metni okumak imkansız olduğunda tamamen farklıdır.

/* 06.07.2006 */

CSS şeffaflığı (css opaklığı, javascript opaklığı)

Şeffaflık bu makalenin konusudur. CSS veya Javascript kullanarak html sayfa öğelerini nasıl şeffaf hale getireceğiniz ve Firefox, Internet Explorer, Opera, Safari, Konqueror tarayıcılarını dikkate alarak tarayıcılar arası davranışa (farklı tarayıcılarda aynı çalışma) nasıl ulaşacağınızla ilgileniyorsanız, hoş geldiniz. Ek olarak, javascript kullanarak şeffaflığı kademeli olarak değiştirmek için hazır bir çözüme bakalım.

CSS opaklığı

CSS opaklık simbiyozu

Simbiyoz derken, istenen etkiyi elde etmek için farklı tarayıcılar için farklı stilleri tek bir CSS kuralında birleştirmeyi kastediyorum. tarayıcılar arası uygulama için.

Filtre: progid: DXImageTransform.Microsoft.Alpha (opaklık \u003d 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 * // * 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 açıkça havayı etkilemez, ancak gerçekten müdahale etmezler (ihtiyacınız olup olmadığına kendiniz karar verin).

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.

İşlev setElementOpacity (sElemId, nOpacity) (var opacityProp \u003d getOpacityProperty (); var elem \u003d document.getElementById (sElemId); if (! Elem ||! OpacityProp) dönüş; // Belirtilen kimliğe sahip bir öğe yoksa veya tarayıcı, saydamlığın nasıl kontrol edileceğine ilişkin bilinen işlevlerin hiçbirini desteklemiyorsa if (opacityProp \u003d\u003d "filtre") // İnternet Patlatıcısı 5.5+ (nOpacity * \u003d 100; // Şeffaflık zaten ayarlanmışsa, onu filtreler koleksiyonundan değiştirin, aksi takdirde style.filter aracılığıyla şeffaflık ekleyin var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; eğer (oAlpha) oAlpha.opacity \u003d nOpacity; else elem.style.filter + \u003d "progid: DXImageTransform.Microsoft.Alpha (opacity \u003d" + nOpacity + ")"; // Diğer filtrelerin üzerine yazmamak için "+ \u003d" kullanın ) Başka // Diğer tarayıcılar elem.style \u003d nOpacity; ) işlevi getOpacityProperty () (if (typeof document.body.style.opacity \u003d\u003d "string") // CSS3 uyumlu (Moz 1.7+, Safari 1.2+, Opera 9) "opaklık" döndür; else if (typeof document.body.style.MozOpacity \u003d\u003d "string") // Mozilla 1.6 ve öncesi, Firefox 0.8 "MozOpacity" döndür; else if (typeof document.body.style.KhtmlOpacity \u003d\u003d "string") // Konqueror 3.1, Safari 1.1 "KhtmlOpacity" döndürür; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\\ d.] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ return "filter"; yanlış dönüş; // şeffaflık yok }

İşlev iki bağımsız değişken alır: sElemId - öğenin kimliği, nOpacity - CSS3 opaklığını belirten 0,0 ile 1,0 arasında bir kayan nokta.

SetElementOpacity işlevinin IE ile ilgili kısmını açıklığa kavuşturmaya değer.

Var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; eğer (oAlpha) oAlpha.opacity \u003d nOpacity; else elem.style.filter + \u003d "progid: DXImageTransform.Microsoft.Alpha (opacity \u003d" + nOpacity + ")";

Soru ortaya çıkabilir, neden elem.style.filter \u003d "..." özelliğine (\u003d) atayarak şeffaflık ayarlanmıyor; ? Bir satırın sonuna filtre özelliği eklemek için neden "+ \u003d" kullanılsın? Cevap, diğer filtrelerin "üzerine yazılmaması" için basittir. Ancak aynı zamanda, bu şekilde ikinci kez bir filtre eklerseniz, bu filtrenin önceden ayarlanmış değerlerini değiştirmeyecek, sadece özellik satırının sonuna eklenecektir, bu doğru değildir. Bu nedenle, filtre zaten kuruluysa, elem.filters öğesine uygulanan filtreler topluluğu aracılığıyla onu işlemeniz gerekir (ancak filtre henüz öğeye atanmamışsa, bu koleksiyon aracılığıyla yönetmenin imkansız olduğunu unutmayın). Koleksiyonun elemanlarına filtre adı veya indeks ile erişilebilir. Ancak filtre, kodda dikkate alınan iki stilde, IE4 kısa stil veya IE5.5 + stilinde belirtilebilir.

Öğe şeffaflığında sorunsuz değişim

Hazır çözüm. Opacity.js kitaplığını kullanma

fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / çilek.jpg "genişlik \u003d" 100 "yükseklik \u003d" 80 "/\u003e fadeOpacity (this.id, "oR1")"onmouseout \u003d" fadeOpacity.back (this.id)"src \u003d" / img / domates.jpg "genişlik \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 "height \u003d" 97 "/\u003e

Basit adımlar:

1. Fonksiyon kütüphanesini bağlarız;
2. Yöntemi kullanarak kuralları tanımlıyoruz fadeOpacity.addRule ();
3. Yöntemi çağırmak fadeOpacity () şeffaflığı başlangıç \u200b\u200bdeğerinden bitiş değerine değiştirmek için veya fadeOpacity.back () şeffaflık seviyesinin başlangıç \u200b\u200bdeğerine dönmek için.

Çiğnemek

Kütüphaneye nasıl bağlanılacağı bence yukarıdaki örnekten görülebilir. Şimdi kuralların tanımını açıklamaya değer. Şeffaflığı sorunsuz bir şekilde değiştirmek için yöntemleri çağırmadan önce, sürecin uygulanacağı kuralları tanımlamanız gerekir: ilk ve son şeffaflığı tanımlamanız ve ayrıca istenirse, şeffaflık değişim sürecinin hızını etkileyen bir gecikme parametresi belirlemeniz gerekir.

Kurallar, yöntem kullanılarak tanımlanır fadeOpacity.addRule

Sözdizimi: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argümanlar:

• sRuleName - rasgele belirlenen kuralın adı;
• nStartOpacity ve nFinishOpacity - saydamlığın başlangıcı ve bitişi, 0,0 - 1,0 aralığındaki sayılar;
• nDelay - milisaniye cinsinden gecikme (isteğe bağlı, varsayılan olarak 30'dur).

Saydamlık soldurma çağrısı, fadeOpacity (sElemId, sRuleName) yöntemleriyle yapılır; burada sElemId öğe kimliği ve sRuleName kural adıdır. FadeOpacity.back (sElemId) yöntemi, saydamlığı orijinal durumuna döndürmek için kullanılır.

: şeffaflığı kolayca değiştirmek için fareyle üzerine gelin

Ayrıca basit bir şeffaflık değişikliği için (ancak kademeli bir değişiklik değil) sözde seçicinin tam olarak doğru olduğunu da not ediyorum. : fareyle üzerine gelme, üzerine geldiğinizde bir öğe için stil tanımlamanıza olanak tanır.

Lütfen resmin A öğesinin içine yerleştirildiğini unutmayın. Gerçek şu ki, Internet Explorer sürüm 6'ya kadar: fareyle üzerine gelme sözde seçici, bir tek CSS'de olması gerektiği gibi herhangi bir öğeye değil bağlantılara uygulanır (IE7'de durum sabittir).

IE'de şeffaflık ve pürüzlü metin

Windows XP'nin piyasaya sürülmesiyle, ekran yazı tiplerinin düzgünleştirilmesi yöntem kullanılarak ortaya çıktı Temiz tipve bununla birlikte, bu kenar yumuşatma yöntemini kullanırken IE'deki yan etkiler. Bizim durumumuzda, kenar yumuşatma yöntemi ClearType etkinleştirildiğinde metin içeren bir öğeye şeffaflık uygulanırsa, metin normal şekilde görüntülenmeyi durdurur (kalın metin - cesurörneğin, çiftler, çeşitli artefaktlar, örneğin çizgiler, pürüzlü metin şeklinde görünebilir). Durumu düzeltmek için, IE için arka plan rengini, CSS özelliğini ayarlamanız gerekir. arka plan rengişeffaflığın uygulandığı öğe. Neyse ki, IE7 hatayı düzeltti.

İyi günler, web geliştirme meraklıları ve yeni başlayanlar. BT alanının trendlerini ya da web modasını takip etmeyenler için, "css araçlarıyla şeffaf bir blok nasıl yapılır" konulu bu yayının tam size göre olduğunu ciddiyetle duyurmak istiyorum. Nitekim, mevcut 2016'da, çeşitli şeffaf nesnelerin çevrimiçi hizmetlere tanıtılması şık bir hareket olarak kabul edilir.

Bu nedenle, bu yazıda size şeffaflık yaratmanın tüm mevcut yöntemlerinden bahsedeceğim, antediluvian çözümlerinden başlayarak, çözümlerin tarayıcılarla uyumluluğuna odaklanacağım ve ayrıca belirli program kodu örnekleri vereceğim. Şimdi işe koyul!

Yöntem 1. Antediluvian

Hala zayıf bilgisayarlar varken ve "yetenekler" geliştirilmemişken, geliştiriciler şeffaf bir arka plan oluşturmak için kendi yöntemlerini buldular: renkli piksellerle sırayla şeffaf pikseller kullanmak. Böylece, oluşturulan blok ölçeklendiğinde bir dama tahtası gibi görünüyordu, ancak normal boyutunda bir tür şeffaflık gibi görünüyordu.

Bu, benim görüşüme göre, "koltuk değneği" elbette, modern çözümlerin çalışmadığı tarayıcıların eski sürümlerinde yardımcı oluyor. Ancak metnin görüntülenme kalitesinin , böyle yazılı, keskin bir şekilde düşer.

Yöntem 2. Kafası karışmadı

Nadir durumlarda, geliştiriciler sorunu yarı saydam bir resim ekleyerek çözer ... hazır yarı şeffaf bir resim! Bunun için PNG-24 formatında kaydedilen resimler kullanılır. Bu grafik biçimi, 256 yarı saydamlık düzeyi ayarlamanıza olanak tanır.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Bununla birlikte, bu yöntem birkaç nedenden dolayı uygun değildir:

1. Internet Explorer 6 bu teknolojiyle çalışmaz, bunun için betik kodu yazmanız gerekir;
2. Arka plan renklerini css'de değiştirmek imkansızdır;
3. Tarayıcıda resim görüntüleme işlevi devre dışı bırakılırsa, kaybolur.

Yöntem 3. Tescilli

Bir bloğu şeffaf hale getirmenin en yaygın ve en bilinen yolu özelliktir opaklık.

Parametre değeri, 0'da nesnenin görünmez olduğu ve 1'de tamamen görüntülendiği aralıkta değişir. Ancak burada da bazı hoş olmayan anlar var.

İlk olarak, tüm çocuklar şeffaflığı miras alır. Bu, yazılı metnin arka planla birlikte "parlayacağı" anlamına gelir.

İkinci olarak, Internet Explorer yeniden "burnunu döndürür" ve sürüm 8'e kadar, opaklık.

Bu sorunu çözmek için kullanın filtre:alfa (Opaklık \u003d değer).

Bir örneğe bakalım.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Yöntem 4. Modern

Günümüzde profesyoneller rgba (r, g, b, a) aracını kullanıyor.

Bundan önce RGB'nin tüm kırmızı tonlarından, G - yeşilin tonlarından ve B - mavinin tonlarından R'nin sorumlu olduğu popüler renk modellerinden biri olduğunu söylemiştim.

Css parametresi durumunda, A değişkeni alfa kanalından sorumludur ve bu da şeffaflıktan sorumludur.

İkinci yöntemin ana avantajı, alfa kanalının stilli blok içindeki nesneleri etkilememesidir.

rgba (r, g, b, a) şu sebeplerden dolayı desteklenmektedir:

• Opera'nın 10 sürümü;
• Internet Explorer 9;
• Safari 3.2;
• Firefox'un 3 sürümü.

İlginç bir gerçeğe dikkat çekmek isterim! Sevilen Internet Explorer 7, bir özelliği birleştirirken hata veriyor arka plan rengi renklerin adıyla (arka plan rengi: altın). Bu nedenle, yalnızca kullanmaya değer:

arka plan rengi: rgba (255, 215, 0, 0.15)

Şimdi bir örnek verelim.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Mağazamızda her çeşit çiçek bulacaksınız.

Bloğun metin içeriğinin tamamen görünür olduğunu (% 100 siyah), arka planın ise 0.88'lik bir alfa kanalına ayarlandığını unutmayın. % 88.

Bu, yayını sonlandırır. Bloguma abone olun ve arkadaşlarınızı davet etmeyi unutmayın. Web dillerini öğrenmede iyi şanslar! Güle güle!