CSS'de arka plan görüntüsü şeffaflığı nasıl ayarlanır? CSS arka plan şeffaflığı. Şeffaf arka plan veya CSS Gri yarı saydam arka plana sahip metin

Herkese selam. Bildiğiniz gibi arka plan, arka plan rengini ayarlamanıza veya arka plan görevi görecek bir resim yüklemenize izin veren bir CSS özelliğidir. CSS3 ayrıca doğrusal ve radyal gradyanlar oluşturma yeteneğini de tanıttı, ancak bu ayrı bir makalenin konusu. Aynısında css'de arka plan özelliği için şeffaflık nasıl ayarlanır onu anlatmak istedim.

css arka planı için şeffaflığı ayarla

Yani, tüm bunlar gibi bir renk kayıt formatı sayesinde çok basit bir şekilde yapılır rgba . Grafik düzenleyicilerle çalışıyorsanız, muhtemelen RGB renk modunun kodunun şu şekilde çözüldüğünü bilirsiniz: kırmızı (kırmızı), yeşil (yeşil) ve mavi (mavi) oranı. Yani, rgba neredeyse aynı, sadece bir parametre daha eklendi - şeffaflık. Şu şekilde yazılı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 ile 255 arasında belirtiriz, burada 255 en yüksek doygunluktur. Dördüncü parametre şeffaflığımızdır. Burada değer 0 ile bir arasında yazılır. 1 tamamen opak bir öğedir ve 0 tamamen saydam bir öğedir. Buna göre, 0'a ayarlarsanız, arka plan rengi hiç görünmeyecektir.

Artık css'deki 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 uygulanırken metne şeffaflık da uygulanabilir ve bu da onu okunamaz hale getirir.

Şeffaf arka plan örneği

Yarı saydam bir arka planın faydalarını bir örnekle göstermek kolaydır. Örneğin, genel bir sayfa arka planımız var. Düz siyah bir renk verilseydi bloğa şöyle görünürdü:

Ve şimdi bloğa aynı siyah rengi ayarlayalım, ancak rgba renk formatını kullanarak, örneğin son değeri 0.7 olarak belirterek belirtelim. Şu şekilde ortaya çıkacak:
Artık bloğun arka planı yarı saydamdır ve arka plan görüntüsü bunun içinden görülebilir. Bu resim ve arka plan yalnızca gösterim amaçlıdır. Anladığınız gibi, css arka planında saydamlı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ğildir. 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 ayarlayarak milyonlarca farklı renk elde edebilirsiniz ve yarı saydamlık, gerekirse site için birçok güzel efekt oluşturmanıza olanak tanır.

Oldukça sık, örneğin bir web sitesine eklemek için İnternette uygun bir resim bulabilirsiniz. Ya da belki bir kolaj yapıyorsunuz ve bir resme başkalarını eklemeniz gerekiyor. Bu sadece istenen görüntülerin genellikle bir tür arka planı vardır.

bakalım nasıl yapabiliriz düzenleyiciyi kullanarak görüntü için şeffaf bir arka plan yapınAdobephotoshop. Adobe Photoshop CS5'in İngilizce sürümünü yükledim, bu yüzden üzerinde göstereceğim.

Çeşitli kısayol tuşları kombinasyonları vermeye çalışacağım.

Henüz Photoshop yüklemediyseniz, nadiren kullanıyorsunuz veya İngilizce ise Paint.net'te şeffaf bir arka plan yapabilirsiniz. Bu, sabit diskinizde fazla yer kaplamayan basit bir Rusça resim düzenleyicidir. Linke tıklayarak detaylı makaleyi okuyabilirsiniz. Paint.net programını web sitemizden indirebilirsiniz.

Basit bir örnekle başlayalım. Diyelim ki düz bir arka planda bir resminiz var, bu bir logo veya bir şeyin adı olabilir. Photoshop'ta şeffaf bir arka plan üzerine bu logoyu veya yazıtı yapalım.

İstediğiniz görüntüyü düzenleyicide 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çılacak, Tamam'a 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 ayarlayın, örneğin 20 ve 100. Resmin seçimini kaldırmak için "Ctrl + D" tuşlarına basın.

Hassasiyeti ayarlayın ve arka plan alanındaki sihirli değneğe basın. Seçilen arka plana, seçilmeyen kısımları eklemek için "Shift" tuşunu basılı tutun ve seçime devam edin. Seçili alanları silmek için "Sil"e tıklayın.

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

Bir çok farklı renk ve nesneye sahip bir görseliniz veya fotoğrafınız varsa, Photoshop'ta bir görsel için şeffaf arka plan nasıl yapılır gelin birlikte inceleyelim.

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

Şimdi şeffaf bir arka plan üzerinde bırakmak istediğimiz nesneyi seçmemiz gerekiyor. Özellik çubuğunda, farklı boyutlar ayarlayın ve nesneye tıklayarak ona alanlar ekleyin. Gereksiz bir arka plan yanlışlıkla vurgulanırsa, "Alt" tuşuna basın ve kaldırın.

Sonucu görmek için "Q" tuşuna basın. Görüntünün saydamlaşan kısımları pembe renkle 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ı içine "Ctrl + V" yapıştırın. Üzerlerinde arka planın gereksiz kısımları varsa Silgi aracını kullanarak bunları kaldırın. Şeffaf bir arka planda yapılan görüntüleri PNG veya GIF formatında kaydediyoruz.

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

CSS Arka Plan Şeffaflığı

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