İyi günler, web geliştirme meraklıları ve yeni başlayanlar. BT alanındaki trendleri veya daha doğrusu 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 bildirmek istiyorum. 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 tufandan önceki çözümlerden başlayarak şeffaflık yaratmanın mevcut tüm yöntemlerini anlatacağım, çözümlerin tarayıcılarla uyumluluğuna odaklanacağım ve ayrıca program koduna özel örnekler vereceğim. Şimdi işe koyul!
Yöntem 1. Tufan öncesi
Hala zayıf bilgisayarlar varken ve "yetenekler" geliştirilmediğinde, geliştiriciler şeffaf bir arka plan yaratmanın kendi yollarını buldular: şeffaf pikselleri renkli olanlarla birlikte 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, bence, "koltuk değneği" elbette, modern çözümlerin çalışmadığı eski tarayıcı sürümlerinde yardımcı olur. Ancak metnin görüntülenme 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 resmin eklenmesiyle çözerek ... hazır bir yarı saydam resim ekler! Bunun için PNG-24 formatında kaydedilen görseller 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:
- Internet Explorer 6 bu teknolojiyle çalışmaz, bunun için komut dosyası kodu yazmanız gerekir;
- Arka plan renklerini css'de değiştiremezsiniz;
- Tarayıcıda görüntüleri gösterme işlevi devre dışı bırakılırsa, kaybolacaktır.
Yöntem 3. Tescilli
Bir bloğu şeffaf hale getirmenin en yaygın ve iyi bilinen yolu özelliktir. opaklık.
Parametre değeri, 0'da nesnenin görünmez olduğu ve 1'de tam olarak görüntülendiği aralıkta değişir. Ancak burada da tatsız anlar yaşanıyor.
İlk olarak, tüm çocuklar şeffaflığı devralır. Bu, yazılı metnin de arka planla birlikte "parlayacağı" anlamına gelir.
İkincisi, Internet Explorer yine "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 ö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ı kullanmaktadır.
Ondan önce RGB'nin popüler renk modellerinden biri olduğunu söylemiştim, burada R tüm kırmızı tonlarından, G - yeşil tonlarından ve B - mavi tonlarından sorumludur.
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 durumlarda desteklenir:
- Opera'nın 10 versiyonu;
- Internet Explorer9;
- Safari 3.2;
- Firefox'un 3 sürümü.
İlginç bir gerçeği belirtmek isterim! 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 kullanmaya değer:
arka plan rengi: rgba (255, 215, 0, 0.15)
Şimdi bir örnek için.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Her çeşit çiçeği mağazamızda 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, yayını tamamlar. Bloguma abone olun ve arkadaşlarınızı davet etmeyi unutmayın. Web dillerini öğrenmede iyi şanslar! Güle güle!
Açıklama
Bir öğenin arka plan rengini belirtir. Bu özellik, özellikleri üst öğesinden devralmasa da, başlangıç değeri saydam olarak ayarlandığından, alt öğelerin arka plan rengi, üst öğenin arka plan rengiyle aynıdır.
Sözdizimi
arka plan rengi:<цвет>| şeffaf | miras
Değerler
şeffaf Arka planı şeffaf olarak ayarlar. inherit Değeri üst öğeden 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.
Bu örnek, bir web sayfasındaki öğeler için arka plan rengini ayarlamak için üç farklı yol kullanır. Örneğin sonucu Şekil 1'de gösterilmektedir. bir.
Pirinç. 1. Arka plan rengini uygulama
Nesne Modeli
Document.getElementById ("elementID") .style.backgroundColor
tarayıcılar
7.0 sürümüne kadar olan Internet Explorer, devralma değerini desteklemez.
Arka plan görüntüsünün şeffaflığını (en azından 2016 için) CSS (CSS 3 dahil) aracılığıyla ayarlamanın doğrudan bir yolu yoktur. Bu sorun için birçok geçici çözüm vardır.
Arka planları karıştırma
En basit çözüm, iki arka planı (bir görüntü ve bir yarı saydam renk) karıştırmaktır. Bu yöntem, "şeffaf arka plan görüntüsü" altında aynı tür arka plan varsa uygundur. bu hiç şeffaflık değil, görüntüyü renkle karıştırarak taklidi. Bir arka plan görüntüsünden ve bir alfa kanalıyla istenen renkten oluşan bir çift arka plan ayarlayın. Bundan sonra, en uygun karıştırma modunu seçin ve kompozisyonu istenen sonuca ayarlamak için rengin alfa kanalını kullanın.
Arka plan: url ("/ resimler / img1.jpg"), rgba (255,255,255,0.9); arka plan karışım modu: renk;
Sözde öğe ekleme
İstediğinizi elde etmenin en iyi yolu. After sözde sınıfı kullanarak bir sözde öğe oluşturun. Var
#main (konum: göreceli;) #main: after (içerik: ""; ekran: blok; konum: mutlak; üst: 0; sol: 0; arka plan resmi: url (/ wp-content / uploads / 2010/11 /tandem.jpg); genişlik: %100; yükseklik: %100; opaklık: 0,2; z-endeksi: -1;)
Herkese merhaba. Muhtemelen bildiğiniz gibi, arka plan, bir arka plan rengi ayarlamanıza veya arka plan görevi görecek bir görüntü yüklemenize izin veren bir css özelliğidir. CSS3 ayrıca doğrusal ve radyal gradyanlar oluşturma yeteneğini de sunar, ancak bu ayrı bir makalenin konusu. Bunda da size css'de arka plan özelliği için şeffaflık nasıl ayarlayacağınızı anlatmak istedim.
CSS arka planı için şeffaflığı ayarla
Yani, rgba renk notasyonu formatı sayesinde bunların hepsi çok kolay. Grafik düzenleyicilerle çalışıyorsanız, muhtemelen RGB renk modunun kırmızı, yeşil ve mavi anlamına geldiğini biliyorsunuzdur. Yani, rgba pratik olarak aynıdır, yalnızca bir parametre daha eklenir - şeffaflık. Şu şekilde yazılmıştır:
Arka plan rengi: rgba (173, 57, 22, 0.5)
İlk olarak, rengi rgba modunda ayarladığımızı açıkça belirtiyoruz. Ardından, üç ana rengin doygunluk değerlerini 0'dan 255'e kadar belirtiriz, burada 255 en yüksek doygunluktur. Dördüncü parametre şeffaflığımızdır. Burada 0 ile bir arasında bir değer yazılır. 1 tamamen opak ve 0 tamamen şeffaftır. Buna göre, 0'a ayarlarsanız, arka plan rengi hiç görünmeyecektir.
Artık css'de arka plan özelliği için şeffaflığı nasıl ayarlayacağınızı biliyorsunuz. Bunu yapmak için rgba renk modunu kullanmanız gerekir. Opaklık özelliği de vardır, ancak bir bütün olarak tüm öğe için geçerlidir. Yani opaklık uygulandığında metne saydamlık da uygulanarak okunamaz hale getirilebilir.
Örneğin şeffaf arka plan
Yarı saydam bir arka planın avantajlarını bir örnekle göstermek kolaydır. Örneğin, bir sayfa için genel bir arka planımız var. Düz siyah bir renk verilseydi bloğa şöyle görünürdü:
Şimdi bloğa aynı siyah rengi ayarlayalım, ancak rgba renk formatını kullanarak, örneğin son değeri 0.7'de belirterek belirtelim. Şu şekilde çıkıyor:
Artık bloğun arka planı görünür durumda ve bunun sayesinde arka plan görüntüsünü görebilirsiniz. Bu resim ve arka plan yalnızca gösterim amaçlıdır. Tahmin edebileceğiniz gibi, css arka planındaki şeffaflık, diğer katmanlarda bulunan diğer arka planları gizlemeden göstermek için iç içe geçmiş bir öğenin arka planına ihtiyaç duyduğunuzda kullanışlı olabilir.
Rengi rgba kullanarak ayarlamak zor değil. Daha önce de belirtildiği gibi - ilk üç harf üç ana renk anlamına gelir: kırmızı, yeşil ve mavi veya daha doğrusu payları (0'dan 255'e kadar). Farklı değerler vererek, milyonlarca farklı renk elde edebilirsiniz ve yarı saydamlık, gerekirse site için birçok güzel efekt oluşturmanıza olanak tanır.
Opaklık özelliği, CSS'de şeffaflık efekti oluşturmak için kullanılır.
IE8 ve önceki tarayıcılar alternatif bir özelliği destekler - filtre: alfa (opaklık = x), burada "x" 0 ile 100 arasında değişebilir, değer ne kadar düşükse öğe o kadar şeffaf olur.
Diğer tüm tarayıcılar, 0.0 ile 1.0 arasında bir değer olarak alabilen standart CSS opaklık özelliğini destekler, değer ne kadar düşükse, öğe o kadar şeffaf olur:
Denemek "şeffaflık
Hover sözde sınıfı, öğelerin üzerine geldiğinizde öğelerin görünümünü değiştirmenize olanak tanır. Bu fırsatı, fareyle üzerine gelindiğinde görüntünün saydamlığını kaybetmesini sağlamak için kullanacağız:
Denemek "Arka plan şeffaflığı
Bir öğeyi saydam yapmanın iki olası yolu vardır: yukarıda açıklanan opaklık özelliği ve arka plan rengini RGBA biçiminde belirtme.
RGB renk temsil modeline zaten aşina olabilirsiniz. RGB (Kırmızı, Yeşil, Mavi - kırmızı, yeşil, mavi) - kırmızı, yeşil ve mavi renkleri karıştırarak tonu belirleyen bir renk sistemi. Örneğin, metin rengini sarıya ayarlamak için aşağıdaki bildirimlerden herhangi birini kullanabilirsiniz:
Renk: rgb (255,255,0); renk: rgb (%100, %100, 0);
RGB ile belirtilen renkler, daha önce kullandığımız hex değerlerinden alfa saydamlık kanalına izin vermesi bakımından farklılık gösterecektir. Bu, alfa saydamlığına sahip bir öğenin arka planının altında ne olduğunu göstereceği anlamına gelir.
RGBA renk bildirimi, sözdiziminde standart RGB kurallarına benzer. Bununla birlikte, diğer şeylerin yanı sıra, değeri RGBA (RGB yerine) olarak bildirmemiz ve 0.0 (tamamen şeffaf) ila 1 (tamamen opak) aralığında renk değerinden sonra şeffaflık için ek bir ondalık değer ayarlamamız gerekir.
Renk: rgba (255,255,0,0.5); renk: rgba (%100, %100, 0,0.5);
Opaklık özelliği ile RGBA arasındaki fark, opaklık özelliğinin tüm öğeye saydamlık uygulaması, yani öğenin tüm içeriğinin saydam hale gelmesidir. Ve RGBA, bir öğenin tek tek bölümlerinin şeffaflığını ayarlamanıza olanak tanır (örneğin, yalnızca metin veya arka plan):
Gövde (arka plan resmi: url (img.jpg);) .prim1 (genişlik: 400 piksel; kenar boşluğu: 30 piksel 50 piksel; arka plan rengi: #ffffff; kenarlık: 1 piksel düz siyah; yazı tipi ağırlığı: kalın; opaklık: 0,5; filtre : alfa (opaklık = 70); / * IE8 ve önceki sürümler için * / metin hizalama: merkez;) .prim2 (genişlik: 400 piksel; kenar boşluğu: 30 piksel 50 piksel; arka plan rengi: rgba (255,255,255,0.5); kenarlık: düz 1 piksel siyah; yazı tipi ağırlığı: kalın; metin hizalama: orta;) Bir deneyin "
Not: RGBA değerleri IE8 ve önceki sürümlerde desteklenmez. Alfa renk değerlerini desteklemeyen eski tarayıcılar için bir yedek renk bildirmek için, bunu RGBA değerinden önce belirtin: background: rgb (255,255,0); arka plan: rgba (255,255,0,0.5);
