Özgün ve canlı bir modern tasarıma sahip sayfalar oluşturmayı öğrenmek ister misiniz? Yarı saydam elemanların kullanımı bu zor görevi çözmede size yardımcı olabilir. Bugün, yapısal elemanların şeffaflığını belirlemenin temel pratik yollarına bakacağız.

Şeffaflığı nasıl ayarlarım?

Bu konuyu web teknolojilerinin tarihsel gelişim prizması üzerinden ele alırsak, aşağıdaki yaklaşımlar ayırt edilebilir:

• Emlak opaklık.
• Kullanma PNG -Görüntüler
• Sistem biçimi RGBA
• Ve son olarak, antik dönem veya damalı görüntüler.

CSS özelliği Opaklığı

Şekillendirme uygulaması CSSözellikleri opaklık uygulandığı öğenin şeffaflığını ayarlamanıza olanak tanır. Bağımsız değişken olarak kullanılabilecek değerler 0 ile 1 arasındadır.
Bir örneğe bakalım.

< html> < head> < title> YAPILACAKLAR bir başlık sağlar < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Çok fazla metniniz olacak

/ * Sayfanın gövdesi için arka plan * / ). prozrachen (dolgu: 10px; / * Metin girintisi * / arka plan: koyu turkuaz; / * Arka plan rengini ayarlayın * / kenar boşluğu: 0 otomatik; / * Bloğu ortala * / genişlik:% 50; / * Blok genişliğini ayarlayın * / opaklık: 0.7; / * Şeffaflığı ayarla * / yazı tipi: 48px / 64px Times New Roman; metin hizalama: yaslama; )

Sonuç olarak, yarı saydam bir bloğumuz var:

Önemli!!!

1. Opaklıkşu aralıktaki değerleri alır: 0 (tam şeffaflık) - 1 (opak).
2. Çapraz tarayıcı uyumluluğu. AT IE yedinci sürüme kadar dahil Opaklıkdesteklenmiyor. Aşağıdaki satır, bir elemanın aynı görüntüsünü elde etmeye yardımcı olacaktır:

   filtre: alfa (Opaklık \u003d 70);

   Mülkün filtreyok htmlözellikler, değerleri 1'den 100'e değiştirir ve yalnızca öğelere uygulanabilir:

   • mutlak konumlandırma ile ( pozisyon: mutlak)
   • sabit bir doğrusal boyutla ( yükseklik veya genişlik).
3. Şeffaflık derecesi çocuklar tarafından miras alınır, böylece çocuk daha şeffaf hale getirilebilir, ancak daha az yapılamaz. Yani, yarı saydam bir arka plan üzerinde CLEAR metni yapmayın.

Önceki örnekte, son paragrafın malzemesinin daha iyi anlaşılması için metni beyaza ayarlayın.

beyaz renk;

ve mikroskop altında düşünün:

Gördüğünüz gibi, bloğumuzun (metin) içeriği de yarı saydam hale geldi. Peki ya pratikte içeriğin şeffaflığıyla değil, sadece arka planın şeffaflığıyla ilgileniyorsanız? Bu durumda, sonraki öğeye gidin.

PNG resimlerini kullanma

Formatın ilginç bir özelliği PNG256 düzeyde şeffaflığa sahip olmasıdır. Bence düşünce trenini yakaladınız ve muhtemelen bu yaklaşım için zaten bir algoritma geliştirdiniz. Sadece dile getirmem gerekiyor.

Sonuç olarak, şeffaf bir arka plana ve opak içeriğe sahip bir bloğumuz var:

Önemli!!!

1. Mülkün aksine opaklıkşeffaflık yalnızca arka plan için ayarlanır
2. Çapraz tarayıcı uyumluluğu. Hemen hemen tüm tarayıcılarda çalışır ve bu bir artı. Ama şeffaflık PNGdesteklenmiyor IE6... Sitenizi böyle bir antik çağ için optimize ediyorsanız, başka yöntemler veya komut dosyaları kullanmanız gerekecektir.
3. Resimlerin görüntülenmesini kapattığınızda, arka planınız kaybolacaktır (mobil cihazlarda ekranı optimize ederken bu noktayı dikkate alın, çünkü sınırsız İnternet her zaman elinizin altında değildir).
4. Rengi ve / veya şeffaflığı değiştirmek için yeni bir görüntü oluşturmanız ve bunu sunucuya yüklemeniz gerekir.

RGBA sistem biçimi

Arka plan şeffaflığını değiştirmenin en modern yöntemlerinden biri sistemin kullanılmasıdır. RGBA.

RGBA- üç standart kanal kullanan renk temsil sistemi RGB(kırmızı, yeşil, mavi) ve dördüncü sözde Alfaşeffaflık derecesini karakterize eden kanal.

arkaplan: rgba (r, g, b, a);

Zaten bildiğimiz örnekte, içeriği değiştirin CSSaşağıdaki dosya:

gövde (arka plan: url (./ vaden- pro- logo. png); / * Duvar Kağıdı * / ). prozrachen (dolgu: 10px; arka plan: rgba (0, 206, 209, 0.7); kenar boşluğu: 0 otomatik; genişlik:% 50; yazı tipi: 48px / 64px Times New Roman; renk: beyaz; metin hizalama: yasla;)

Önemli!!!

1. Mülkün aksine opaklıkşeffaflık yalnızca arka plan için ayarlanır
2. Yöntemden farklı olarak PNGresimler, rengi veya şeffaflık derecesini değiştirmek için, sadece değerleri değiştirmemiz gerekiyor rgba.
3. Çapraz tarayıcı uyumluluğu. Tüm modern tarayıcılarda çalışır ( IE9, Op10, Fx3,Sf3.2Eski tarayıcılar ya şeffaflıktan ödün vermek zorunda kalacak ya da opaklık, png yöntemler.

Damalı görüntüler veya tarihe saygı

Bu yöntem web tasarımının kökenindeydi ve hiçbir şeyi nasıl yapacağını gerçekten bilmeyen eski-eski tarayıcılar gördüm. Renkli karelerin şeffaf olanlarla değiştiği damalı bir arka plan oluşturmaktan ibarettir.

Böyle bir resmin uygulanmasının bir sonucu olarak, arka plan olarak sözde şeffaf bir arka plan elde edildi.

Önemli!!!

1. Metni böyle bir arka plana karşı görüntülerken, gözler çabucak yorulabilir (özellikle aşağı kaydırırken oluşan dalgalanmalar).
2. Diğer açılardan, uygulama özellikleri PNG resimleri yöntemine benzer.

Özetleyelim mi?

• Şeffaf bloğun altında parlak, monoton olmayan bir resim olmalıdır. Düz bir arka planda, şeffaflığın zevki kaybolur.
• Belirli bir pratik yaklaşım seçerken, hedef kitlenizin hangi tarayıcıları kullandığına rehberlik edin. Çapraz tarayıcı uyumluluğu önemlidir.

Bu derste, böyle analiz edeceğiz CSS özellikleri - opaklık ve RGBA... Emlak Opaklık yalnızca öğelerin şeffaflığından ve işlevinden sorumludur RGBA - renk ve şeffaflık için, alfa kanalının şeffaflık değerini belirtirseniz.

CSS Opaklığı

Sayısal değer opaklık 0,0 - 1,0 aralığında belirtilir, burada sıfır tam şeffaflık ve bir tam tersine mutlak opaklıktır. Örneğin% 50 şeffaflık görmek için değeri 0,5 olarak ayarlamanız gerekir. Unutulmamalıdır ki opaklık ebeveynin tüm çocuklarını kapsar. Bu, yarı saydam bir arka plan üzerindeki metnin de yarı saydam olacağı anlamına gelir. Ve bu zaten çok önemli bir dezavantaj, metin o kadar iyi göze çarpmıyor.

Ekran görüntüsünde, siyah metnin mavi arka planla aynı yarı saydam hale geldiğini açıkça görebilirsiniz.

Div (
arkaplan: url (resimler / resminiz.jpg); / * Arkaplan resmi * /
genişlik: 750px;
yükseklik: 100px;
kenar boşluğu: otomatik;
}
.blue (
arka plan: # 027av4; / * Yarı saydam arka plan rengi * /
opaklık: 0.3; / * Arka plan yarı saydamlık değeri * /
yükseklik: 70px;
}
h1 (
dolgu: 6px;
yazı tipi ailesi: Arial Black;
yazı tipi ağırlığı: daha kalın;
yazı tipi boyutu: 50px;
}

RGBA formatında CSS şeffaflığı

Renk kaydı için format RGBA, mülke daha modern bir alternatiftir opaklık. R (kırmızı), G (yeşil), B (mavi) - şu anlama gelir: kırmızı, yeşil, mavi. Son Mektup Bir - şeffaflığı ayarlayan alfa kanalı anlamına gelir. RGBA Aksine Opaklık çocukları etkilemez.

Şimdi kullanarak örneğimize bakalım RGBA... Bu çizgileri stillerde değiştirelim.

Arka plan: ## 027av4; /* Arka plan rengi */
opaklık: 0.3; / * arka plan yarı saydamlık değeri * /

sonraki bir satıra

Arka plan: rgba (2, 127, 212, 0.3);

Gördüğünüz gibi, 0.3 şeffaflık değeri her iki yöntem için aynıdır.

RGBA örneğinin sonucu:

İkinci ekran görüntüsü ilkinden çok daha iyi görünüyor.

Blokların arka planının yarı saydamlığı ile oynayarak, sitede ilginç efektler elde edebilirsiniz. Bu yarı saydam blokların fotoğraf gibi alacalı bir tasarımın üzerinden geçmesi önemlidir. Sadece bu durumda etki farkedilir olacaktır. Bu teknik uzun zamandır tasarımda kullanılmaktadır, hatta herhangi bir CSS3tamamen grafik programlarında uygulandı.

Müşteri, düzenin eski tarayıcı sürümlerinde iyi görünmesini isterse Internet Explorersonra mülk ekle filtre ve kodun geçerliliğinin etkilenmemesi için yorum yapmayı unutmayın.

Çıktı

Biçim RGBA hariç tüm modern tarayıcılar desteklenir Internet Explorer... Ayrıca çok önemli RGBA esnek, çocukları etkilemeden yalnızca belirli bir öğeye etki eder. Bunun yerleşim tasarımcısı için daha uygun olduğu açıktır. Seçimim açıkça formatın lehine RGBA almak için cSS'de şeffaflık.

Malzemenin daha iyi bir şekilde birleştirilmesi ve daha fazla netlik için, ilerlemenizi öneririm.

CSS3'ün gelişiyle birlikte, mizanpaj tasarımcılarının işi çok daha kolay ve daha mantıklı hale geldi: artık JavaScript kullanarak bir nesneyi gerçekten esnek bir şekilde özelleştirebilirsiniz. Diyelim ki arka planın şeffaflığını ayarlamanız gerekiyor - CSS hemen birkaç seçenek sunuyor.

Arka plan, bir dizi öznitelik, arka plan tekrarı, arka plan eki, arka plan kaynağı, arka plan klibi, arka plan rengi) tarafından belirlenir ve bunların her biri ayrı ayrı yazılabilir veya arka plan özelliği altında birleştirilebilir. Her birine daha yakından bakalım.

Arka plan rengi özelliği

IE8 bile bu yöntemi desteklemektedir. Değişken düzen için arka plan olarak birkaç görüntü kullanılır. En önemlisi, herhangi bir resmi kullanırken CSS'de arka plan rengini ayarlamayı unutmayın, çünkü kullanıcılar resmi yüklemeyebilir.

Arka plan konumu özelliği

Bir bloğun arka planını ayarlamak için bir görüntü kullanıyorsanız, CSS, görüntüyü ekranda herhangi bir yere konumlandırmanıza izin verir. Varsayılan olarak, görüntü sol üst köşede yer alır. Öznitelik, sözlü yönleri (üst, alt, sol, sağ) veya sayısal (yüzdeler, pikseller ve diğer birimler) kabul eder. Bu durumda, iki değer belirtmelisiniz: yatay ve dikey:

gövde (arka plan konumu: sağ orta;) - bu örnekte arka plan, resmin alt ve üst mesafesi aynı olacak şekilde sayfanın sağ tarafında yer alacaktır.

Arka plan boyutu özelliği

Bazen arka planı genişletmek veya boyutunu küçültmek için CSS kullanmanız gerekir. Bunu yapmak için arka plan boyutu özelliğini kullanın ve arka plan boyutu hem piksel hem de yüzde olarak ve diğer ölçü birimlerinde ayarlanabilir.

Bu öznitelikle ilgili bazı sorunlar vardır: tarayıcıların önceki sürümlerinde arka planı doğru şekilde görüntülemek için önekler kullanılmalıdır. Elbette mevcut sürümler bu özelliği tam olarak destekliyor ve belirli özelliklere duyulan ihtiyaç ortadan kalktı.

Arka plan ek özelliği

Bu öznitelik, arka plan görüntüsünün kaydırma davranışını belirtir. Bu nedenle, 3 değer alabilir (bu makalede sunulan tüm özelliklerde ortak olan miras alma hariç):

• sabit - arka plandaki resmi hareketsiz hale getirir;
• kaydırma - arka plan diğer öğelerle birlikte kayar;
• yerel - içerik kayıyorsa arka plandaki görüntü kaydırılır. İçeriğin ötesine geçen arka planlar yakalanır.

Kullanım örneği:

gövde (arka plan eki düzeltildi).

Firefox şu anda ikinci özelliği (yerel) desteklemiyor.

Arka plan-kaynak özniteliği

Bu özellik, elemanın konumlandırılmasından sorumludur. Daha eski tarayıcılar önekler gerektirir. Mülkün kendisinin üç parametresi vardır:

• dolgu kutusu çerçevenin kalınlığını hesaba katarak arka planı kenara göre konumlandırır;
• border-box sınır çizgisinin arka planla tamamen veya kısmen üst üste gelebilmesi açısından önceki özellikten farklıdır;
• içerik kutusu görüntüyü içeriğe bağlayarak konumlandırır.

Birden fazla değer verilirse, tarayıcılar farklı tepki verebilir: Firefox ve Opera yalnızca ilk seçeneği kabul eder.

Arka planda tekrar özelliği

Tipik olarak, bir arka plan bir görüntü tarafından tanımlanmışsa, yatay veya dikey olarak yinelenmelidir. Arka plan tekrar özelliği bunun içindir. Dolayısıyla, CSS'si böyle bir özellik içeren bir bloğun arka planı birkaç parametreden birine sahip olabilir:

• tekrar yok - görüntü sayfada tek bir versiyonda görünür;
• tekrar et - arka plan x ve y eksenleri boyunca tekrarlanır;
• tekrar-x - yalnızca yatay olarak;
• tekrar et - sadece dikey olarak;
• uzay - arka plan tekrarlanır, ancak boşluk doldurulamazsa, resimler arasında boşluklar görünür;
• yuvarlak - tüm alanı tüm resimlerle doldurmak mümkün değilse, görüntü ölçeklenir.

Özniteliğin kullanımına bir örnek:

gövde (arka plan tekrarı: yinelemesiz yineleme) - benzer şekilde arka plan tekrarı: tekrar-y.

CSS3'te, parametreleri virgülle ayrılmış olarak listeleyerek birden çok görüntü için değerler ayarlamak mümkündür.

Arka plan klibi özelliği

Bu özellik, arka planın sınırlar altındaki davranışını tanımlar (örneğin, kesikli kenarlıklar durumunda):

• dolgu kutusu - arka plan kesinlikle bloğun içinde görüntülenir;
• border-box - görüntü çerçevelerin altına girer;
• içerik kutusu - arka plandaki resim yalnızca içeriğin içinde görünür.

Kullanım örneği:

gövde (arka plan klibi: içerik kutusu;).

Chrom ve Safari, -webkit- önekini gerektirir.

Opaklık ve filtre nitelikleri

Opaklık özelliği, arka planın şeffaflığını ayarlamanıza olanak tanır - CSS özelliği tüm tarayıcılarda çalışacaktır. Değer, 0,0 - 1,0 aralığında ayarlanır. Bu durumda, CSS arka planının şeffaflığını tamsayı değeri olmadan ayarlayabilirsiniz: 0.3 yerine 3 yazmak yeterlidir:

.block (arka plan resmi: url (img.png); opaklık: .3;).

CSS'si sürüm 9'un altındaki IE için bile çalışacak olan arka planın şeffaflığını ayarlamak için filter özelliğini kullanın:

.block (arka plan resmi: url (img.png); filtre: alfa (opaklık \u003d 30);).

Bu durumda, opaklık değeri 0 ila 100 aralığında ayarlanır. Opaklık niteliğinin, miras olarak RGBA kullanan opaklık ayarından farklı olduğuna dikkat edin: opaklık kullanılırken, yalnızca arka plan saydam hale gelmez, aynı zamanda bloğun içindeki tüm öğeler de olur.

BDT ve diğer tüm ülkelerdeki tarayıcı kullanım istatistiklerini daima takip edin. Tüm pafta tasarımcılarının en büyük sorunu IE'nin eski versiyonlarıdır, CSS3'ün tam olarak kullanılmasına izin vermezler. Kod yazarken, tarayıcınızın herhangi bir CSS özelliğini destekleyip desteklemediğini kontrol eden özel servisleri kullanmayı unutmayın. Tarayıcıların eski sürümlerini yükleyemiyorsanız, web sitesinin çalışmasını çevrimiçi olarak farklı tarayıcılarda kontrol edecek bir hizmet bulun.

Bugün bir metin bloğunun şeffaf arka planından, nasıl yapılacağından ve CSS3'ün bunun için neler sunduğundan bahsetmek istiyorum. Rgba ve hsla'ya geçmeden önce, metin içeren bir blok için yarı saydam bir arka plan kullanma örneklerine ya da bunun nasıl başarıldığına ve hangi sorunların ortaya çıktığına bakalım. Gösteri için, bazı java programları tarafından işlenen ve maalesef uzun süredir kaybolan bu resmi kullanacağız.

Aşağıdaki resme bakıyoruz. Metin ile yarı saydam bir bloğu üst üste koymak istediğiniz bir grafik arka plan var. İdeal olarak, 2 sayısının altındaki şekilde olması gerekir, ancak bazen 3 sayısının altında olan şey olmalıdır. Bir kusur daha var, ancak biraz aşağıda sözlü olarak bahsedeceğim çünkü ekran görüntüsünü almanın bir yolu yoktu.

Rgba ve hsla içermeyen yarı saydam arka plan

1. Şeffaf PNG ... En iyi seçenek çünkü açık farkla en çapraz tarayıcı ve en basit olanıdır. Bloğun şeffaf olması için bloğun arka planı olarak ayarlanan bir piksellik yarı saydam bir PNG gereklidir. Ve hepsi bu.
   
   Dezavantajları: Yalnızca bir tane gereklidir.
2. Opaklık yoluyla şeffaflık ... Blok şeffaflığı, tarayıcılar arası aşağıdaki gibi ayarlanır:

   opaklık: 0.5;
   filtre: alfa (opaklık \u003d 50);
   -moz-opaklık: 0.5;

   0.5 ve 50% 50 şeffaflıktır. Ama bir sorun var. İstenilen bloğu böyle bir yarı saydamlığa ayarlarsak, yukarıdaki görüntüdeki üçüncü seçeneği göreceğiz - bloğun içeriği de yarı saydam hale gelecektir. Bununla birlikte, yarı saydamlığın ayarlandığı metin bloğunun altına başka bir bloğun yerleştirildiği bir çıkış yolu vardır.

   Bir örneğe bakalım. Turuncu resimli bloğun gövde etiketi, hem metni hem de saydam arka planı içeren kap #block_bg, içinde yarı saydam arka plana sahip bloğun #blok_transparent ve metin içeren bloğun #block_text olmasını sağlayın.

   
   

   
   

   Metin metin metni, çok, çok metin

   
   

   gövde (arka plan: url (image.jpg);)
   #block_bg (
   konum: göreceli;
   taşma: gizli;
   genişlik: 400px;
   dolgu: 10px;
   }
   #block_text (konum: göreli; z-endeksi: 100;)
   #block_transparent (
   opaklık: 0.5;
   filtre: alfa (opaklık \u003d 50);
   -moz-opaklık: 0.5;
   arka plan: #fff;
   konum: mutlak;
   üst: 0;
   sol: 0;
   z-endeksi: 90;
   yükseklik: 5000px;
   genişlik: 400px;
   }

   Dikkatinizi şeffaf bloğun genişliğini (satır 19) ayarlamanın gerekli olduğu gerçeğine çekiyorum, aksi takdirde 1 piksele ve genel bloğun genişliğine (satır 5) daralacaktır, aksi takdirde metin şeffaf bloğun ötesine geçecektir (genişlik metin için ayarlanabilse de, ancak temel bir fark yoktur. olacak). Metni ve saydam kutunun kenarını girintilemek için altıncı satırdaki dolguyu kullanın. Şeffaflığın yüksekliği ayarlanabilir hale getirmek için, daha yüksek bir yükseklik (satır 18) ve genel blok için bir örtüşme (satır 4) verin.
   Bu yüzden, her şeyi tek bir bloğa doldurduk, bu da sayfanın ilginç bir arka planın olduğu herhangi bir kısmına itilebilir. Evet, ortak block_bg için bir arka plan ayarlamak isteyebilirsiniz, ancak bu daha iyi - hayatınızı daha zor hale getirin (tabii ki göreve bağlı olarak). Başka bir deyişle, tüm bu yapıyı, doldurma ayarlayabileceğiniz ve acı çekmeyeceğiniz ayrı bir bloğa sığdırmak daha iyidir.
   Dezavantajları: Çok hantal.

rgb ve hsl, rgba ve hsla - CSS3 özellikleri

Daha doğrusu, bunlar tam olarak özellikler değildir - bu, arka plan, renk, kenarlık vb. Özellikler için yeni bir renk ayarlama becerisidir.

Özelliklerin adı RGB (Kırmızı, Yeşil, Mavi) ve HSL (Ton, Satutasyon, Açıklık) renk sistemlerinden geldi. İlk sistem, ana renkleri kırmızı, yeşil ve maviyi karıştırarak renk uzayını tanımlar. İkinci sistemde, renk bileşenleri bir renk hakkındaki bilgileri insanlar için daha tanıdık bir biçimde görüntüler: Bu renk nedir? Ne kadar yoğun? Ne kadar açık ya da karanlık?

rgb ve rgba

Rgb ve rgba ile başlayalım. R, g, b değerleri 0 ila 255 veya% 0 ila% 100 arasında ayarlanabilir. A (alfa, şeffaflık) değeri 0 ile 1 arasında ölçülür (kesirli değerler bir nokta ile belirtilir - 0,4, 0,7, vb.). R, g ve b, geçerli aralıklarını aşan değerlere ayarlanırsa (örneğin, 300 veya% 110 veya -5), en yakın geçerli değere küçülürler.

Örnek olarak arkaplan özelliğine bakalım (dileyenler renk veya bordür alsa da).

arkaplan: rgb (0, 0, 255); / * saf mavi * /
arka plan: rgb (% 100,% 50,% 0); / * saf mavi * /
arkaplan: rgb (10, 145, 500); / * 10, 145, 255 olarak tanınacak * /
arkaplan: rgba (10, 145, 255, 1); / * önceki ile aynı * /
arkaplan: rgba (100, 50, 255, 0.1); / * çok şeffaf leylak rengi * /

Evet, özellik ile açılış parantezi arasına boşluk koyamayacağınızı ve bir satırda normal sayılarda bazı değerler, diğerlerinde yüzde olarak bazı değerler ayarlayamayacağınızı söylemeyi unuttum. Bunu yaparsan, hiçbir şey işe yaramaz.

hsl ve hsla

Ve hsl ve hsla hakkında birkaç söz. A'nın değeri, rgb ve rgba ile aynı şekilde ayarlanır, ancak ilk üç parametrede durum biraz farklıdır. h 0 ile 360 \u200b\u200barasındadır ve s ve l% 0 ile% 100 arasındadır.

Ve en önemli şey. Rgb'de kafadan rengi belirlemek çok zorsa (damlalıklı üçüncü taraf bir program neredeyse her zaman gereklidir), o zaman her şeyin yerine oturması için gözünüzün önünde bir resim olması yeterlidir. Resim, h parametresinin gölgelerini göstermektedir.

Gerekli rengi tahmin etmek için bir gölge seçin, ardından s, renk doygunluğunu (burada% 0 doymamış bir renktir (gri tonu) ve% 100 en yüksek doygunluktur) ve açıklığını (% 0 - bununla birlikte renk her zaman siyah olacaktır ve % 100 - beyaz). Yukarıdakilere dayanarak, resim tonları% 100 doygunluk ve% 50 açıklıkta gösterir.

Artık tüm renk alanı bir bakışta kafanızın içinde. Elbette, manuel seçim damlalığın yerini almaz ve herkesin kafasında bir "renk boşluğu" olması gerekmez, ancak bazen neyin gerekli olduğunu hızlı bir şekilde anlamak ve test etmek için uygundur.

Ve sadece birkaç örnek

arkaplan: hsl (180,% 100,% 50); / * koyu mavi * /
arkaplan: hsla (140,% 50,% 30, 0.5); / * yarı saydam, yeşilin gölgesi neredeyse hiç fark edilmiyor * /

Dezavantajları: 4 özelliğin tümü eşek ve daha eski tarayıcılar tarafından desteklenmez.

Tamamlanma

Sonuç olarak, CSS3 başka çok yararlı şeyler de sağlar, ancak her zaman olduğu gibi, IE ilerlemenin ana frenidir. Müşteri siteleri için şimdilik onu kullanmaktan kaçınırdım (beyne yine de boşuna dayanacaklar) ve PNG ile seçeneği tercih ederim. Ve web sitenizde - neden olmasın. Özellikle eşeklerin veya antik çağın herhangi bir parçasının üzerinde oturmayan ileri düzey insanlar tarafından ziyaret edilirse.

Oldukça sık olarak, örneğin bir web sitesine yerleştirmek için İnternette uygun bir resim bulabilirsiniz. Ya da belki bir kolaj yapıyorsunuz ve diğerlerini bir çizime eklemeniz gerekiyor. Ancak ihtiyacınız olan görüntülerin genellikle bir tür arka planı vardır.

Nasıl yapabileceğini bulalım düzenleyiciyi kullanarak resim için şeffaf bir arka plan yapınAdobePhotoshop... Adobe Photoshop CS5'in İngilizce sürümü var, bu yüzden üzerinde göstereceğim.

Size çeşitli klavye kısayolları vermeye çalışacağım.

Henüz Photoshop yüklemediyseniz, nadiren kullanıyorsunuz veya İngilizce ise, Paint.net'te şeffaf bir arka plan oluşturabilirsiniz. Bu, sabit sürücünüzde çok az yer kaplayacak basit bir Rusça resim editörüdür. Bağlantıya tıklayarak detaylı bir makale okuyabilirsiniz. Paint.net'i web sitemizden indirebilirsiniz.

Basit bir örnekle başlayalım. Düz bir arka plan üzerinde bir resminiz olduğunu varsayalım, bu bir logo veya bir şey için bir isim olabilir. Bu logoyu veya yazıyı Photoshop'ta şeffaf bir arka plan üzerine yapalım.

Düzenleyicide istenen görüntüyü açın. Şimdi katman için şeffaf bir arka plan yapalım. "Katmanlar" penceresinde, eklenen katmana çift tıklayın - karşısında bir kilit olacaktır. "Yeni Katman" penceresi açılacaktır, içindeki "Tamam" ı tıklayın. Bundan sonra kilit kaybolacaktır.

"Sihirli Değnek" aracını seçin. Özellik çubuğunda, hassasiyet seviyesini belirtin, nasıl çalıştığını anlamak için farklı değerler verin, örneğin 20 ve 100. Resmin seçimini kaldırmak için "Ctrl + D" tuşlarına basın.

Hassasiyeti ayarlıyoruz ve arka planda sihirli bir değnekle tıklıyoruz. Seçili arka plana, seçilmemiş parçaları eklemek için, "Shift" tuşunu basılı tutun ve seçime devam edin. Seçili alanları kaldırmak için “Sil” e basın.

Şimdi, arka plan yerine bir dama tahtası var - bu, beyaz arka planı şeffaf yapmayı başardığımız anlamına geliyor. Seçimi kaldır - "Ctrl + D".

Birçok farklı renk ve nesneye sahip bir görüntünüz veya fotoğrafınız varsa, Photoshop'ta bir görüntü için nasıl şeffaf bir arka plan oluşturacağınızı düşünün.

Bu durumda Hızlı Seçim aracını kullanacağız. Farenin sol tuşu ile sihirli değneğe hafif bir gecikme ile tıklıyoruz ve menüden istenilen aracı seçiyoruz.

Şimdi şeffaf bir arka planda tutmak istediğimiz nesneyi seçmemiz gerekiyor. Özellik çubuğunda, farklı boyutlar ayarlayın ve nesneye alanlar ekleyerek üzerine tıklayın. Yanlışlıkla gereksiz bir arka plan seçilirse, "Alt" tuşuna basın ve onu kaldırın.

Sonucu görmek için "Q" düğmesine basın. Resmin şeffaf hale gelecek kısımları pembe ile vurgulanacaktır.

"Ctrl + C" tuşlarına basarak seçili alanları kopyalayın. Ardından, şeffaf bir arka plana sahip yeni bir "Ctrl + N" dosyası oluşturun.

Kopyalanan parçaları "Ctrl + V" ye yapıştırın. Üzerinde istenmeyen arka plan parçaları kalmışsa, bunları Silgi aracını kullanarak kaldırın. Saydam bir arka planda yapılan resimleri PNG veya GIF formatında kaydedin.

Resmin beyaz arka planını saydam yapın veya Photoshop'taki renkli bir görüntünün veya fotoğrafın ayrı ayrı parçaları için arka planı saydam yapın. Bundan sonra, gerektiğinde bunları kullanabilirsiniz: onları siteye gömün, başka bir resme ekleyin veya ilginç kolajlar yapın.

CSS arka plan şeffaflığı

Sitedeki arka planın şeffaflığı bir CSS özelliği aracılığıyla oluşturulur. Şeffaflığa ulaşmanın iki yolu vardır: opaklık özelliği ve arka plan: rgba (). Her birine bakalım ve sonra bir karşılaştırma yapalım.

1. Arka plan şeffaflığı için CSS opaklık özelliği

CSS, arka planlar da dahil olmak üzere görüntülerin, metinlerin şeffaflığını ayarlayabileceğiniz bir opaklık özelliğine sahiptir.

Şeffaflık, basitçe 0,0 ile 1,0 arasında bir gerçek sayı belirleyerek ayarlanır. Sayı ne kadar düşükse, nesne o kadar az görünür olacaktır.

opaklık: 0.5; // Yarı saydamlık opaklığı: 0.2; // Nesne yalnızca% 20 opaklıkta görülebilir: 0.8; // Nesne yalnızca% 80'de görülebilir

Opacity özelliğine sahip bir örneğe bakalım.

Metin ayrıca şeffaftır