Elementin yarı saydamlık etkisi arka plan görüntüsünde açıkça görülmektedir ve çeşitli şekillerde yaygınlaşmıştır. işletim sistemleriçünkü şık ve güzel görünüyor. Web tasarımında yarı saydamlık da kullanılır ve elde edilir. opaklık özellikleri veya arka plan için ayarlanan RGBA renk formatı.

opaklık özelliği

Bu özelliğin ana özelliği, saydamlık değerinin sadece arka planı değil, içindeki tüm alt öğeleri etkilemesidir. Bu, hem arka planın hem de metnin yarı saydam olacağı ve ekleyerek şeffaflık seviyesini artırmanın işe yaramayacağı anlamına gelir. Masada. 1, metin ve arka planın görünümünü şu şekilde gösterir: farklı değerler opaklık.

Örnek 1, opaklık kullanılarak yarı saydam bir kutunun nasıl oluşturulacağını gösterir.

Örnek 1: Bir web sayfasının arka planı

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Genellikle tasarım gereği, yalnızca öğenin arka planı yarı saydam olmalı ve okunabilirliğini korumak için metin opak olmalıdır. Opaklık özelliği, öğenin içindeki metin de kısmen saydam olacağından buraya sığmaz. Alfa kanalının veya başka bir deyişle saydamlık değerinin bir parçası olduğu RGBA biçimini kullanmak en iyisidir. Değer rgba yazılır, daha sonra rengin kırmızı, mavi ve yeşil bileşenlerinin değerleri virgülle ayrılmış parantez içinde listelenir. Son olarak 0 ile 1 arasında ayarlanan şeffaflık gelir (Şekil 1), 0 tam şeffaflık ve 1 rengin opaklığı anlamına gelir.

Pirinç. 1. rgba kullanmanın sözdizimi

Örnek 2, yarı saydam bir arka plan oluşturmak için RGBA formatının kullanımını gösterir.

Örnek 2: Yarı saydam arka plan

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2. Arka plan için opaklık değeri %90 olarak ayarlanmıştır.

Pirinç. 2. Yarı saydam arka plan ve opak metin

HTML ve CSS'de şeffaf bir arka plan oluşturma (opaklık ve RGBA efektleri)

yarı saydamlık etkisiÖğe, arka plan görüntüsünde açıkça görülüyor ve şık ve güzel göründüğü için farklı işletim sistemlerinde yaygınlaştı. Ana şey, yarı saydam blokların altında tek renkli bir desene sahip olmamak, ancak bir görüntü, bu durumda şeffaflık fark edilir hale gelir.

Bu etki elde edilir Farklı yollar PNG görüntüsünü arka plan olarak kullanma, kareli görüntü oluşturma ve opaklık özelliğini kullanma gibi eski moda teknikler dahil. Ancak blokta yarı saydam bir arka plan yapmak gerektiğinde, bu yöntemlerin hoş olmayan dezavantajları vardır.

Metin ve arka planın yarı saydamlığını düşünün - web sitesi tasarımında nasıl doğru şekilde kullanılır:

Bu özelliğin ana özelliği, saydamlık değerinin sadece 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 seviyesini artırabilirsiniz.

HTML 5 CSS 3 IE 9

Web tasarımında kısmi saydamlık da kullanılır ve yalnızca öğenin arka planı için ayarlanan RGBA renk formatı aracılığıyla elde edilir.

Tipik olarak bir tasarımda, bir öğenin yalnızca arka planı yarı saydam olmalı ve metnin okunabilir olmasını sağlamak için metin opak olmalıdır. Opaklık özelliği, öğenin içindeki metin de kısmen saydam olacağından buraya sığmaz. Alfa kanalının veya başka bir deyişle saydamlık değerinin bir parçası olduğu RGBA biçimini kullanmak en iyisidir. Değer rgba yazılır, daha sonra rengin kırmızı, mavi ve yeşil bileşenlerinin değerleri virgülle ayrılmış parantez içinde listelenir. Son olarak, rgba uygulamak için sözdizimi olan 0 tamamen şeffaf ve 1 opak olmak üzere 0'dan 1'e ayarlanan şeffaflık gelir.

Yarı saydam arka plan HTML 5 CSS 3 IE 9

Arka plan için opaklık değeri %90'a ayarlanmıştır - yarı saydam bir arka plan ve opak metin.

İyi günler, web geliştirme meraklıları ve yeni başlayanlar. Bilişim alanındaki trendleri, daha doğrusu web modasını takip etmeyenler için bu yayının şu konuyla ilgili olduğunu ciddiyetle duyurmak istiyorum: “Şeffaflık nasıl yapılır? css bloğu araçları "tam zamanında sizin için. Gerçekten de, mevcut 2016'da çeşitli şeffaf nesnelerin çevrimiçi hizmetlere dahil edilmesi şık bir hareket olarak görülüyor.

Bu nedenle, bu yazıda size her şeyi anlatacağım. mevcut yollar Tufan öncesi çözümlerden başlayarak şeffaflık yaratarak, çözümlerin tarayıcılarla uyumluluğuna odaklanacağım ve ayrıca somut örnekler program kodu. Ve şimdi çalışmak için!

Yöntem 1. Tufan öncesi

ne zaman vardı zayıf bilgisayarlar ve "yetenek" geliştirilmemiştir, geliştiriciler şeffaf bir arka plan oluşturmanın kendi yollarını bulmuşlardır: şeffaf piksellerin renkli olanlarla birlikte kullanılması. Bu şekilde oluşturulan blok, ölçeklendiğinde bir dama tahtası gibi görünüyordu, ancak normal boyutta bir tür şeffaflığa benziyordu.

Bu, bence, "koltuk değneği" elbette, modern çözümlerin çalışmadığı eski tarayıcı sürümlerinde yardımcı olur. Ancak, metin görüntüleme kalitesinin , böyle yazılı, keskin bir şekilde düşer.

Yöntem 2. Karışık değil

Nadir durumlarda, geliştiriciler sorunu yarı saydam bir görüntünün eklenmesiyle çözerek ... zaten bitmiş bir yarı saydam görüntü ekler! 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

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

1. Internet Explorer 6 bu teknoloji ile çalışmıyor, bunun için script kodu yazmanız gerekiyor;
2. CSS'de arka plan renklerini değiştiremezsiniz;
3. Tarayıcıda görüntü görüntüleme işlevi devre dışı bırakılırsa kaybolacaktır.

Yöntem 3. Tanıtılan

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

Parametrenin 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 bazı hoş olmayan anlar var.

İlk olarak, tüm alt öğeler şeffaflığı devralır. Ve bu, yazılı metnin de arka planla birlikte “parlayacağı” anlamına gelir.

İkincisi, Internet Explorer tekrar burnunu açar ve sürüm 8'e kadar çalışmaz. opaklık.

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

Bir örnek düşünün.

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ı kullanmaktadır.

Ondan önce RGB'nin, R'nin tüm kırmızı tonlarından, G - yeşil tonlarından ve B - mavi tonlarından sorumlu olduğu popüler renk modellerinden biri olduğunu söyledim.

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

Ana avantaj son yol- alfa kanalı, stilli blok içindeki nesneleri etkilemez.

rgba (r, g, b, a) şu durumlarda desteklenir:

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

not etmek istiyorum ilginç gerçek! Sevgili 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 şunları kullanmalısınız:

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

Ve şimdi bir örnek.

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 bulabilirsiniz.

Arka plan 0.88'lik bir alfa kanalına ayarlıyken bloğun metin içeriğinin tamamen görünür olduğunu (%100 siyah) unutmayın, yani. %88.

Bu yazı sona erdi. Bloguma abone olun ve arkadaşlarınızı davet etmeyi unutmayın. Web dillerini öğrenmede iyi şanslar! Güle güle!

Vlad Merjeviç

Kısmi şeffaflık, doğru kullanıldığında web sitesi tasarımında çok etkileyici görünüyor. Ana şey, yarı saydam blokların altında tek renkli bir desen değil, bir görüntü olması gerektiğidir, bu durumda şeffaflık fark edilir hale gelir. Bu efekt birçok şekilde elde edilir ve eski moda yöntemler de dahil olmak üzere her şeyi hatırlarsanız, bu, arka plan olarak bir PNG görüntüsünü kullanmak, kareli bir görüntü oluşturmak ve opaklık özelliğini kullanmaktır. Ancak blokta yarı saydam bir arka plan yapmak gerektiğinde, bu yöntemlerin hoş olmayan bir dezavantajı vardır. Neyin tehlikede olduğunu netleştirmek için kısa bir inceleme yapacağım, ayrıca yarı saydamlık etkisi yaratmak için geleneksel olmayan seçeneklere aşina olmayan okuyucular için.

arka plan olarak PNG

AT grafik düzenleyici PNG-24 formatında kaydedilen tek renkli yarı saydam bir çizim önceden hazırlanır (Şekil 1). Bu formatın bir özelliği, 256 şeffaflık seviyesini desteklemesidir veya basitçe söylemek gerekirse, yarı saydam resimleri görüntüleyebilir.

Pirinç. 1. Arka plan oluşturmak için resim

Ardından, örnek 1'de gösterildiği gibi arka plan özelliği aracılığıyla arka plan olarak bir resim ekliyoruz.

Örnek 1: Yarı saydam bir desen kullanma

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 3.

Pirinç. 2. Duvar kağıdı uygulama

Eski tarayıcı Internet Explorer 6, PNG-24'te yarı saydamlıkla çalışmaz, herhangi bir nedenle bu tarayıcıyı desteklemeniz gerekiyorsa, bunun için komut dosyaları kullanmanız gerekecektir.

Sunulan yöntemin bir takım sınırlamaları vardır. Bu nedenle, tarayıcıdaki görüntüleri kapattığınızda arka plan tamamen kaybolacaktır. Ayrıca arka plan rengini ve saydamlık değerini değiştirmek o kadar kolay değil, bunun için görüntüyü yeniden düzenlemeniz gerekecek.

kareli görüntü

Bu yöntem, tarayıcıların "hiçbir şey yapamadığı" ve şablon dışı çözümler aramanız gerektiğinde, yarı saydamlığı uygulamanın eski yollarına aittir. İşin püf noktası, saydam ve opak pikseller arasında değişen bir görüntü oluşturmaktır (Şekil 3). Böyle düzenli bir yapı, esasen onu taklit ederek yarı saydamlık etkisi yaratır.

Pirinç. 3. Büyütülmüş damalı desen

İşte sonunda nasıl göründüğü (Şekil 4).

Pirinç. 4. Yarı saydamlığın taklidi

Bu yöntemin dezavantajları öncekiyle karşılaştırılabilir, hareli desenler de oluşabilir ve metin bozulması meydana gelebilir.

opaklık özelliği

CSS 3 opaklık özelliği, saydamlık değerini ayarlar ve 0 ile 1 arasında değişir; burada sıfır, öğenin tam saydamlığıdır ve bir, tam tersine, opaklıktır. Opaklık özelliğinin bir özelliği vardır - saydamlık tüm alt öğelere dağıtılır ve üst öğelerinin saydamlık değerini aşamaz. Yarı saydam bir arka plan üzerinde opak metin olamayacağı ortaya çıktı (örnek 2).

Örnek 2: Opaklığı kullanma

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Örneğin sonucu Şekil 1'de gösterilmektedir. 5.

Pirinç. 5. Metin ve arka planın yarı saydamlığı

8.0 sürümüne kadar olan Internet Explorer'da opaklık çalışmaz, bu nedenle tarayıcıya özel filtre özelliği bunun için kullanılır. Doğal olarak, geçersiz CSS koduyla sonuçlanır.

RGBA

Modern yaklaşım, yukarıdaki yöntemlerden çok daha basit ve görseldir ve renk ve arka plan için RGBA formatının kullanılmasından oluşur. İlk üç harf birçok kişiye tanıdık gelir ve kırmızı, yeşil, mavi (kırmızı, yeşil, mavi) anlamına gelir, sonuncusu alfa kanalını sembolize eder ve öğenin şeffaflığını ayarlar. Kayıt formatı bu.

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

Parantez içinde, harfler yerine renk bileşeninin değeri konur, herhangi bir grafik düzenleyicide görüntülenebilir, son değer saydamlığı ayarlar ve opaklık özelliğinin değeriyle eşleşir.

Tüm tarayıcılar bu formatı desteklemez: Sürüm 9'dan beri Internet Explorer, sürüm 10'dan beri Opera, 3'ten beri Firefox, 3.2'den beri Safari. Ama genel olarak, modern tarayıcılarşeffaflığı doğru şekilde görüntüleyin. IE'nin eski sürümleri için, rengi normal biçiminde ayrı ayrı belirtebilirsiniz, ancak elbette şeffaflık olmayacaktır. Veya filtre özelliğini tekrar kullanın, ancak o zaman şeffaflığın metni de etkileyeceği gerçeğine katlanmak zorundasınız (örnek 3). uymak geçerli kod CSS, koşullu yorumlar kullandım.

Örnek 3: RGBA'yı Kullanma

HTML5 CSS3 IE Cr Op Sa Fx

Örneğin sonucu Şekil 1'de görülebilir. 6.

Pirinç. 6. Opak metin içeren yarı saydam arka plan

Resmi öncekiyle karşılaştırın, harfler daha parlak ve net hale geldi.

AT internet tarayıcısı Explorer 7, arka plan rengini farklı değerlerle birleştirirken bir hata buldu. Örneğin, aşağıda gösterildiği gibi arka plan rengini kırmızıya ayarlarsanız, IE7'deki arka plan hiç görüntülenmez.

Div ( background-color: red; /* IE7'de uygulanamaz */ background-color: rgba(255, 0, 0, 0.5); )

Bu, background-color özelliğinin background ile değiştirilmesiyle çözülür.

Div ( background: red; /* Ve bu işe yarar */ background: rgba(255, 0, 0, 0.5); ) Ancak bir uyarı var. CSS doğrulayıcı, bir RGBA değeri verildiğinde arka planda "yemin eder". Ancak aynı zamanda, background-color için de doğru bir şekilde geçerlidir. Genel olarak, her zaman olduğu gibi, tarayıcılar ve geçerlilik arasında seçim yapmanız gerekir.

Tanım

Bir öğenin arka plan rengini belirtir. Bu özellik, üst öğesinin özelliklerini devralmasa da, başlangıç ​​değeri saydam olarak ayarlandığından, arka plan rengi alt öğelerüst öğenin arka plan rengiyle eşleşir.

Sözdizimi

arka plan rengi:<цвет>| şeffaf | miras

değerler

şeffaf Saydam bir arka plan ayarlar. inherit Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

AT bu örnek web sayfası öğeleri için üç çeşitli yollar arka plan rengi ayarları. Örneğin sonucu Şekil 1'de gösterilmektedir. bir.

Pirinç. 1. Arka plan rengini uygula

Nesne Modeli

document.getElementById("elementID ").style.backgroundColor

tarayıcılar

Internet Explorer 7.0 sürümüne kadar devralma değerini desteklemez.