konumu: mutlak; #main'den önce (veya sonra) ve #main ile aynı yükseklikte, ardından arka plan görüntüsü ve opaklık: 0,2; .

#main ( konum: göreceli; ) #main:sonra ( 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;

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

İçgörünün etkisiÖğeler arka plan görüntüsüne iyi yerleştirilmiş ve farklı işletim sistemlerinde genişletilmiştir, bu nedenle şık ve güzel görünür. Şeffaf blokların altındaki annenin başı tek renkli bir bebek değil, netliğin kendisinin farkedildiği bir görüntüdür.

Bu etki, şeffaf görüntülerin kullanılması, eşlenmiş bir görüntünün oluşturulması ve opaklığın gücü gibi eski moda yöntemler de dahil olmak üzere çeşitli yollarla elde edilebilir. Her ne kadar sadece TV ekranında blok halinde çalışma yeterli olsa da bu yöntemlerin dezavantajlı yanları da bulunmaktadır.

Metin ve arka plan arasındaki kontrasta, bunun web sitesi tasarımında doğru şekilde nasıl kullanılacağına bir göz atalım:

Bu gücün temel özelliği, içgörünün öneminin sadece yaprak bitleri için değil, ortadaki tüm yardımcı unsurlar için geçerli olmasıdır. Bu, arka planın ve metnin daha net olacağı anlamına gelir. Opaklık komutunu 0,1'den 1'e değiştirerek görünürlüğü artırabilirsiniz.

HTML 5 CSS 3 IE 9

Web tasarımında netliğin bir kısmı, öğenin arka planı için ayarlanan RGBA renk formatıyla da sınırlıdır.

Tasarımın katı bir öğe olmadan şeffaf olduğundan ve metnin okunabilirliğini korumak için opak olduğundan emin olun. Öğenin ortasındaki metin de çoğu zaman net olacağından, opaklığın gücü buraya uymuyor. Bir kısmı alfa kanalı veya başka bir deyişle şeffaflığın anlamı olan RGBA formatını kullanmak en iyisidir. Anlamı rgba yazıldığından, kollarda renk şemasının kırmızı, mavi ve yeşil bileşenlerinin anlamları belirlenir. Kalan netlik 0 ile 1 arasında ayarlanır; bu, 0'ın net ve 1'in renk körü - rgba sözdizimi olduğu anlamına gelir.

Napivprozor tlo HTML 5 CSS 3 IE 9

Arka planın belirsizlik değeri %90'a ayarlanmıştır; açık bir arka plan ve belirsiz bir metin.

Vlad Merjeviç

Kısmi içgörü, doğru seçimle web sitesi tasarımında çok etkili görünüyor. Golovne, böylece sakin blokların altında tek renkli küçükler değil, görüntülerin kendisi var, bu durumda netlik fark edilir hale geliyor. Bu etki, şeffaf görüntülerin kullanılması, haritalanmış bir görüntünün oluşturulması ve opaklığın gücü gibi eski moda yöntemler de dahil olmak üzere çeşitli yollarla ve bunların tümü ile elde edilebilir. Her ne kadar tam anlamıyla sahada çalışma yeterli olsa da bu yöntemlerin olumsuz yanları da bulunmaktadır. Neler olup bittiğini daha iyi anlamak için etrafa hızlıca bir göz atacağım ve ayrıca içgörü etkisi yaratan geleneksel olmayan seçeneklere aşina olmayan okuyucular için de bir göz atacağım.

PNG Yak arka planı

Grafik editörü önce PNG-24 formatında kaydedilen tek renkli, çağrıştırıcı küçük bir resim hazırlar (Şekil 1). Bu formatın özelliği, 256 seviyeli görünürlüğü desteklemesidir veya görünüşe göre resimlerin ekranda görüntülenmesi mümkündür.

Pirinç. 1. Arka plan resmi

Daha sonra Ek 1'de gösterildiği gibi küçükleri arka plan gücünden ekliyoruz.

Örnek 1. Açık görüşlü küçük çocuğun Vikoristannya'sı

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Bu alın okumalarının sonucu Şekil 1'de gösterilmektedir. 3.

Pirinç. 2. Zastosuvannya arka plan resmi

Eski tarayıcı Internet Explorer 6 PNG-24'te de çalışmıyor, çünkü bazı nedenlerden dolayı komut dosyalarını vikorize etmesi gereken bu tarayıcıyı desteklemek gerekiyor.

Rehberlik yönteminin aralığı düşüktür. Yani tarayıcıda görselleri açtığınızda arka plan kaybolur. Üstelik arka planın rengini ve netlik değerini değiştirmek o kadar da kolay değil, bunun için görüntüyü yeniden düzenlemeniz gerekiyor.

Sık sık görsellere tıklayın

Bu yöntem, tarayıcıların "hiçbir şey yapmadığı" ve alışılmadık kararların alındığı zaman, içgörü fikrini uygulamanın eski yollarına kadar uzanıyor. Odak, piksellerde boşlukların ve boşlukların bulunduğu çerçeveli görüntü üzerindedir (Şekil 3). Bu düzenli yapı, gerçekte sahip olduğu netlik etkisini yaratır.

Pirinç. 3. Daha büyük boynuzlu küçükler

Eksen yeşil bir eksene benziyor (Şek. 4).

Pirinç. 4. İçgörünün taklidi

Bu yöntemin bir kısmını bir öncekiyle karşılaştırabilir, ayrıca hareli saçaklardan kurtulabilir ve metni bozabilirsiniz.

Güç opaklığı

CSS3 opaklık değeri, opaklık değerini temsil eder ve 0 ile 1 arasında değişir; burada sıfır, öğenin opaklığıdır ve biri de belirsizliktir. İktidarda donukluğun bir özelliği vardır; içgörü tüm yardımcı unsurlara yayılır ve babalarının içgörüsünün değerlerini aşabilirler. Net bir arka plan üzerinde belirsiz bir metnin yapılamayacağı ortaya çıktı (örnek 2).

Popo 2. Vikoristannya opaklığı

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Poponun sonucu Şekil 2'de gösterilmektedir. 5.

Pirinç. 5. Metin ve arka planın yayılması

Internet Explorer'ın 8.0 sürümüne kadar olan sürümlerinde opaklık çalışmaz, dolayısıyla filtre gücü tarayıcınıza özeldir. Elbette geçersiz CSS koduyla sonuçlanacaktır.

RGBA

Mevcut yaklaşım, diğer yöntemlerin çoğundan çok daha basit ve daha gelişmiş olup, RGBA formatında çeşitli renk ve arka plan seçeneklerini kullanır. İlk üç harf iyi bilinir ve kırmızı, yeşil, mavi (kırmızı, yeşil, mavi) olarak deşifre edilir, geri kalan ise alfa kanalını sembolize eder ve elementin netliğini ayarlar. Kayıt formatı aşağıdaki gibidir.

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

Kollarda harfler yerine herhangi bir grafik düzenleyicide görülebilecek renk bileşeninin değeri ayarlanır, kalan değer netliği ayarlamak ve güç opaklığı değerlerinden kaçınmaktır.

Tüm tarayıcılar bu formatı desteklemez: Internet Explorer sürüm 9, Opera sürüm 10, Firefox sürüm 3, Safari sürüm 3.2. Ne yazık ki günümüzün tarayıcıları içgörüleri doğru şekilde görüntülüyor. IE'nin eski sürümleri için, yeni format için orijinalin rengini doğrudan belirtebilirsiniz ve elbette netlik olmayacaktır. Aksi takdirde, hızlı bir şekilde güç filtresine döneceğim, aksi takdirde içgörünün metne de müdahale edeceği gerçeğine katlanmak zorunda kalacağım (örnek 3). CSS kodunun geçerli olduğundan emin olmak için bazı akıllıca yorumlar kullanacağım.

Popo 3. Vikoristannya RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Poponun sonucu Şekil 2'de görülebilir. 6.

Pirinç. 6. Belirsiz metinli Napivprozor

Resmi öncekiyle hizalayın, harfler daha parlak ve net hale geldi.

Internet Explorer 7'de arka plan rengini farklı değerlerle birleştirirken bir hata oluştu. Örneğin arka plan rengini aşağıda gösterildiği gibi koyu mavi olarak ayarlarsanız arka plan IE7'de görünmeyecektir.

Div (background-color: red; /* IE7'de takılı kalmadı */ artalan-rengi: rgba(255, 0, 0, 0.5); )

Bu durum, arka plan rengini arka plan ile değiştirdiğinizde ortaya çıkıyor.

Div (background: red; /* Ve bu işe yarıyor */ arka plan: rgba(255, 0, 0, 0.5); ) Ancak burada bir uyarı var. CSS doğrulayıcı, RGBA formatı değerlerini verdiğinizde arka planda "yer alır". Ayrıca arka plan renginin önüne yerleştirmek de doğrudur. Her zaman olduğu gibi tarayıcılar ve geçerlilik arasında seçim yapmanız gerekir.

Herkese merhaba. Bildiğiniz gibi arka plan, arka planın rengini ayarlamanıza veya arka plan olarak görünen görsele renk eklemenize olanak tanıyan bir CSS gücüdür. CSS3 aynı makalenin konusu olan doğrusal ve radyal degradeler oluşturma olasılığını da tanıttı. Kimi bilmek istiyorum, CSS'de olduğu gibi arka planın gücü içgörü verir.

Css arka planı için netliği ayarlayın

RGBA gibi bu tür kayıt formatları hakkında endişelenmek çok kolaydır. Grafik editörleriyle çalışıyorsanız, RGB renk modunun şu şekilde çözüldüğünü bilirsiniz: kırmızı rengin bir kısmı (kırmızı), yeşilin bir kısmı (yeşil) ve mavi (mavi). Yani eksen rgba pratikte aynıdır, yalnızca bir parametre daha eklenir - içgörü. Bunu şu şekilde yazın:

Arka plan rengi: rgba(173, 57, 22, 0,5)

RGB modunun rengini ayarladığı başından beri belli. Daha sonra üç ana rengin yoğunluk değerleri 0 ila 255 arasında gösterilir ve 255 en yüksek doygunluğa sahiptir. Dördüncü parametre ise içgörümüzdür. Burada değerler 0 birim olarak yazılmıştır. 1 – tamamen belirsiz bir öğe ve 0 – tamamen anlayışlı bir öğe. Görünüşe göre, eğer bunu 0 olarak ayarlarsanız, arka plan rengi arka planda görünmeyecektir.

Artık css'in arka planın netlik sağlama gücüne nasıl sahip olduğunu biliyorsunuz. Bunun için rgba renk modunu seçmeniz gerekir. Opaklığın gücü bile, ancak her elemente karşı durağan hale gelecektir. Dolayısıyla, opaklık durgun olduğunda, içgörü metinde bile durağanlaşarak metni okunamaz hale getirebilir.

Popoda Prozora tlo

Net bir arka planın avantajlarını pratikte göstermek kolaydır. Mesela bizim ayrı bir tarafımız var. Axis çok bi bloğa bakıyor, yakbi yomu buv görevleri sulu siyah renk:

Ve şimdi ek renk formatı rgba dışında bloğa aynı siyah rengi ayarlayalım, örneğin kalan değeri 0,7 olarak belirleyelim. Şu şekilde görün:
Artık bloğun arka planı görünür ve arka plan görüntüsü açıkça görülebilir. Bu resim ve arka plan sadece referans amaçlıdır. Tahmin edebileceğiniz gibi, bir css'de arka plan görünürlüğü, gömülü bir öğenin arka planının, diğer toplara yerleştirilmiş diğer arka planları kapatmadan gösterilmesine ihtiyacınız varsa yararlı olabilir.

RGBA kullanarak rengin kendisini ayarlamak zor değildir. Daha önce de söylediğimiz gibi, ilk üç harf üç ana renk anlamına gelir: kırmızı, yeşil ve mavi veya daha kesin olarak bunların kısımları (0'dan 255'e kadar). Farklı değerler belirleyerek milyonlarca farklı renk seçebilir ve aynı zamanda site için ihtiyaca göre birçok güzel efekt oluşturabilirsiniz.