CSS kullanarak metne veya görüntüye saydam bir arka plan nasıl verebilirim?
background Öğeyi yarı saydam yapmak, ancak öğenin içeriğini (metin ve resimler) opak yapmak mümkün, yalnızca CSS kullanarak mümkün mü ?
Bunu, metni ve arkaplanı iki ayrı eleman olmadan elde etmek istiyorum.
Alt öğeler, ebeveynlerinin opaklığına maruz kalıyor gibi görünüyor, bu yüzden ebeveynin opacity:1 göreceli opacity:0.6 .
Stijn Sanders2009-04-302009-04-30 09:00:02Z
Yarı saydam bir PNG resmi kullanın veya CSS 3'ü kullanın:
İşte css3.info, Opacity, RGBA ve uzlaşmadan bir makale (2007-06-03).
Firefox 3 ve Safari 3'te, RGBA'yı Georg Schölly'nin bahsettiği gibi kullanabilirsiniz .
Bilinen bir püf noktası, Internet Explorer'da degrade filtresini kullanarak kullanabilmenizdir.
İlk onaltılık sayı rengin alfa değerini tanımlar.
Tüm tarayıcılar için tam çözüm:
Bu, alt unsurları etkilemeden, RGBa ve filtreler aracılığıyla CSS arka plan saydamlığındandır .
Ekran görüntüleri kanıtı:
Bu, aşağıdaki kodu kullanırken:
Bu, CSS 3'ü kullanmadığım için bulabileceğim en iyi çözüm. Ve gördüğüm kadarıyla Firefox, Chrome ve Internet Explorer'da da harika çalışıyor.
Bir DIV kabını ve iki alt DIV'yi aynı seviyede, biri içerik için, biri de arka plan için yerleştirin. Ve CSS kullanarak, içeriği sığdırmak için arka planı otomatik olarak boyutlandırın ve arka planı gerisini z-index kullanarak arkaya yerleştirin.
Gorkem Pacaci2010-07-132010-07-13 20:51:05Z
Basit bir yarı saydam arka plan rengi için yukarıdaki çözümler (CSS 3 veya arka plan görüntüleri) en iyi seçeneklerdir. Ancak, meraklısı bir şey yapmak istiyorsanız (örn. Animasyon, çoklu arka planlar, vb.) Veya CSS 3'e güvenmek istemiyorsanız, “bölme tekniğini” deneyebilirsiniz:
Teknik, dış panel elemanının içinde iki "katman" kullanarak çalışır:
içeriğin akışını etkilemeden bölme elemanının boyutuna uyan bir tane ("geri"),
ve içeriği içeren ve bölmenin boyutunu belirlemeye yardımcı olan bir tane (“devamı”).
Açık position: relative bölmede önemlidir; panelin boyutuna uyması için arka katmanı söyler. (Eğer gerekiyorsa <p> mutlak olması etiketi, bir panelinden değiştirmek <p> bir etmek <span> ve tüm sarın bir kesinlikle konumlu bu <p> etiketi.)
Bu tekniğin yukarıda listelenenlere kıyasla temel avantajı, bölmenin belirtilen bir boyutta olması gerekmemesidir; Yukarıda kodlandığı gibi, tam genişliğe (normal blok eleman düzeni) sığacak ve yalnızca içerik kadar yüksek olacaktır. Dış panel elemanı, istediğiniz sürece, dikdörtgen olduğu sürece (yani satır içi blok çalışacak; düz eski satır içi çalışmayacak) boyutlandırılabilir.
Ayrıca, arka plan için size çok fazla özgürlük verir; arka öğeye gerçekten bir şey koymakta özgürsünüz ve içeriğin akışını etkilemiyorsa (birden çok tam boyutlu alt katman istiyorsanız, aynı zamanda konumlarının da olduğundan emin olun: mutlak, genişlik / yükseklik:% 100, ve üst / alt / sol / sağ: otomatik).
Arkaplan iç ayarının yapılmasına izin veren bir değişiklik (üst / alt / sol / sağ) ve / veya arka plan sabitlemenin (sol / sağ veya üst / alt çiftlerden birinin çıkarılmasıyla) bunun yerine aşağıdaki CSS kullanılmasıdır:
Yazıldığı gibi, bu Firefox, Safari, Chrome, Internet Explorer 8 (ve üstü) ve Opera’da çalışır, ancak Internet Explorer 7 ve Internet Explorer 6’da ekstra CSS ve ifadeler, IIRC ve en son kontrol ettiğimde, ikinci CSS varyasyonu Opera'da çalışmıyor
Cont katmanının içinde yüzen elemanlar bulunmayacaktır. Bunların temizlendiğinden veya başka bir şekilde içerildiğinden emin olmanız veya alttan kaymaları gerekir.
Kenar boşlukları bölme elemanına gider ve doldurma cont elemanına gider. Tersini kullanmayın (devamdaki kenar boşlukları ya da bölmede dolgu) veya sayfa her zaman tarayıcı penceresinden biraz daha geniş olması gibi tuhaflıklar keşfedeceksiniz.
Belirtildiği gibi, her şey blok veya satır içi blok olmalıdır. CSS'nizi basitleştirmek için <div> s yerine <span> s'yi kullanmaktan çekinmeyin .
Daha dolu bir demo, bu tekniğin esnekliğini, display: inline-block her iki auto & spesifik width s / min-height s ile aynı çizgide kullanarak gösterme :
Ve burada yoğun olarak kullanılan tekniğin canlı bir demo :
Slipp D. Thompson2010-05-242010-05-24 16:07:51Z
Yarı saydam kullanmak daha iyidir .png .
Sadece Photoshop'u açın , bir 2x2 piksel resmi oluşturun ( toplama 1x1 bir Internet Explorer hatasına neden olabilir! ), Yeşil renkle doldurun ve opaklığı "Katmanlar sekmesinde"% 60 olarak ayarlayın. Sonra kaydedin ve arkaplan resmi yapın:
Güzel Internet Explorer 6 dışında elbette güzel çalışır . Daha iyi düzeltmeler var, ancak işte hızlıca kesmek:
İşaretlemeyi en aza indirecek bir hile var: Arka plan olarak sahte bir öğe kullanın ; ana öğeyi ve çocuklarını etkilemeden opaklığı ayarlayabilirsiniz:
Tarayıcı desteği, Internet Explorer 8 ve üstüdür.
En kolay yöntem yarı saydam bir arka plan PNG görüntüsü kullanmak olacaktır .
Internet Explorer 6'da Şeffaf PNG'lerde belirtilen yöntemi kullanıyorum .
Bunun dışında, yan yana iki kardeş eleman kullanarak sahte olabilir - bir yarı saydam hale getirir , sonra diğerini kesinlikle üste yerleştirirsiniz .
Bu yöntem, arka planda bir görüntüye sahip olmanıza izin verir, yalnızca düz bir renk değildir ve kenarlıklar gibi diğer özniteliklerde şeffaflığa sahip olmak için kullanılabilir. Şeffaf PNG görüntüsü gerekmez.
CSS'de :before (veya :after ) kullanın ve öğeyi orijinal opaklığında bırakmaları için opaklık değeri verin. Böylece şunları kullanabilirsiniz: sahte bir öğe oluşturmadan önce ve ona istediğiniz şeffaf arka planı (veya sınırları) verin ve opak tutmak istediğiniz içeriğin arkasına taşıyın z-index .
Bir örnek ( keman ) ( DIV with with class'ın dad sadece renklerle ilgili bir miktar kontrast ve kontrast sağlamak olduğunu, bu ekstra elementin aslında gerekli olmadığını ve kırmızı dikdörtgenin biraz aşağı ve arkasındaki arka planı görünür bırakmak için sağa taşındığını not edin. fancyBg öğesi):
bu CSS ile:
Bu durumda .fancyBg:before , saydamlıkla sahip olmak istediğiniz CSS özelliklerine sahiptir (bu örnekte kırmızı arka plan, ancak bir görüntü veya kenarlıklar olabilir). Geride taşımak için mutlak olarak konumlandırılmıştır .fancyBg (sıfır değerini veya ihtiyaçlarınız için daha uygun olanı kullanın).
Sorun metin aslında yani, sahip sizin örnekte tam olarak kapatması. p Etiketin içinde tam opaklığa sahiptir , ancak p etiket sadece yarı saydamdır.
CSS'de gerçekleştirmek yerine yarı saydam bir PNG arka plan görüntüsü ekleyebilir veya metni ve div'i iki öğeye ayırabilir ve metni kutunun üzerine taşıyabilirsiniz (örneğin, negatif kenar boşluğu).
Aksi takdirde mümkün olmaz.
Yapmamız gereken, CSS çalışma grubu tartışmasına katılmak ve bize arka plan opaklığı niteliği kazandırmaktır! Çoklu arka plan özelliği ile el ele çalışması gerekir.
İşte bunu nasıl yapıyorum (en uygun olmayabilir, ama işe yarıyor):
div Yarı saydam olmak istediğinizi oluşturun . Bir sınıf / kimlik verin. Boş bırakın ve kapatın. Ayarlanmış bir yükseklik ve genişlik verin (örneğin, 300 piksele 300 piksel). 0.5'lik bir opaklık veya ne istersen, arkaplan rengini ver.
Ardından, doğrudan bu div'in altında , farklı bir sınıf / kimliğe sahip başka bir div oluşturun. İçinde metninizi yerleştireceğiniz bir paragraf oluşturun. div Konum ver : göreceli ve üst: -295px ( negatif 295 piksel). İyi bir ölçüm için 2 z-indeksi verin ve opaklığının 1 olduğundan emin olun. Paragrafınıza istediğiniz gibi stil verin, ancak boyutların ilk div taşandan daha küçük olduğundan emin olun, böylece taşma yapmaz.
Bu kadar. İşte kod:
Bu Safari 2.x'te çalışır, ancak Internet Explorer'ı bilmiyorum.
İşte sizin için her şeyi idare edecek bir jQuery eklentisi, Transify ( Transify - bir elemanın arka planına kolayca saydamlık / opaklık uygulamak için bir jQuery eklentisi ).
Her zaman bu soruna rastlıyordum, bu yüzden hayatı çok kolaylaştıracak bir şeyler yazmaya karar verdim. Komut 2 KB'den daha küçüktür ve çalışmasını sağlamak için yalnızca bir satır kod gerektirir ve isterseniz arka planın opaklığını da canlandırır.
Arka planın opaklığı, ancak metnin bazı fikirleri yoktur. Yarı saydam bir görüntü kullanın veya ek bir öğenin üzerine yerleştirin.
Bir süre önce, bu konuda CSS ile Çapraz Tarayıcı Arka Plan Şeffaflığı'nı yazdım .
Garip bir şekilde Internet Explorer 6, arka planı saydamlaştırmanıza ve metni tam olarak opak tutmanıza izin verir. Diğer tarayıcılar için şeffaf bir PNG dosyası kullanmanızı öneririm.
Eğer bir ise Photoshop adam, ayrıca kullanabilirsiniz:
suraj rawat2014-08-072014-08-07 02:39:32Z
Bir öğenin arka planını yarı saydam yapmak, ancak öğenin opak içeriğine (metin ve görüntü) sahip olmak için, bu görüntü için CSS kodu yazmanız gerekir ve opacity minimum değerle adlandırılan bir özellik eklemeniz gerekir .
// Değer ne kadar küçük olursa, o kadar şeffaf olur, değer o kadar az şeffaf olur.
Pushp Singh2016-06-032016-06-03 12:09:42Z
arkaplan rengi: rgba (255, 0, 0, 0.5); Yukarıda belirtildiği gibi basitçe koymak en iyi cevaptır. CSS 3'ü 2013'te bile kullanmak pek de kolay değil çünkü çeşitli tarayıcılardan gelen destek her yinelemede değişiyor.
İken background-color , tüm büyük tarayıcılar (CSS 3 için yeni değil)  tarafından desteklenen alfa saydamlığı, yanıltıcı olabilir özellikle Internet Explorer ile önceki sürümüne 9'a ve önceki sürüm 5.1 için Safari sınır renk ile yapabilirsiniz. 
Compass veya SASS gibi bir şey kullanmak , üretime ve platformlar arası uyumluluğa gerçekten yardımcı olabilir.
 W3Schools: CSS arka plan rengi özelliği
 Norman Blog: Tarayıcı Desteği Kontrol Listesi CSS3 (Ekim 2012)
Will Nielsen2013-01-082013-01-08 20:00:39Z
CSS 3, sorununuzu kolayca çözer. kullanın:
Burada, rgba kırmızı, yeşil, mavi ve alfa değeri anlamına gelir. Yeşil değer 255 nedeniyle elde edilir ve yarı saydamlık 0.5 alfa değeri ile elde edilir.
Touhid Rahman2013-05-202013-05-20 23:36:50Z
Az kullanıyorsanız kullanabilirsiniz fade(color, 30%) .
Degrade sözdizimini kullanarak bunu Internet Explorer 8 için (ab) ile çözebilirsiniz . Renk formatı ARGB'dir. Eğer kullanıyorsanız Sass önişlemci yerleşik fonksiyonu "yani-altıgen-str ()" seçeneğini kullanarak renkleri dönüştürebilirsiniz.
rgba color code Aşağıda verilen bu örnekte olduğu gibi CSS kullanarak bunu yapabilirsiniz .
Aynı div üzerindeki bir görüntünün üzerine bindirmek için daha kolay bir çözüm var. Bu aracın doğru kullanımı değil. Ancak bu bindirmeyi CSS kullanarak yapmak için bir cazibe işlevi görür.
Bunun gibi iç metin gölgesini kullanın:
Sen kullanabilirsiniz RGBA (red, green, blue, alpha) içinde CSS . Bunun gibi bir şey:
Yani sadece böyle bir şey yapmak sizin durumunuzda işe yarayacak:
Benim görüşüme göre, arka plan rengini opaklıkla kullanmanın en iyi yolu aşağıdaki gibidir. Bunu kullanırsak, test rengi, kenarlık, vb. Diğer elementlerin opaklığını kaybetmeyiz.
Opaklıkla arka plan rengini kullan
Vinod Kumar2018-12-122018-12-12 07:29:47Z
Normalde bu sınıfı işim için kullanırım. Oldukça iyi.
Cengkuru Michael2017-02-112017-02-11 08:00:03Z
RGB'de (63, 245, 0) renk kodu gibi opaklığa sahip RGB rengini kullanabilir ve opaklığı ekleyebilir (63, 245, 0, 0.5 gibi) ve ayrıca RGB'yi RGBA ile değiştirebilirsiniz. A opaklık için kullanılacaktır.
Vijay Sharma2016-12-292016-12-29 09:40:00Z
Bir 'div' kabına sığacak şekilde bir resmi nasıl otomatik olarak yeniden boyutlandırırım?
Metin css içinde bir resmin üzerine nasıl yerleştirilir
ImageMagick ve komut satırı istemi kullanarak saydam arka plan belirleme
HTML / CSS kullanarak bir resmin etrafına metin kaydırma
CSS kullanarak vurgulu bir görüntü üzerinde Yakınlaştırma Efekti oluşturma?
Css [duplicate] kullanarak div'deki arka plan görüntüsünü yeniden boyutlandırın
İOS Swift'de bir resme nasıl metin eklerim?
Pip kullanarak uygun bir Python paketini nasıl arayabilirim?
Bir görüntüyü Android'de nasıl şeffaf hale getirebilirim?
Düzenli yayın vs. static_cast vs. dynamic_cast [yinelenen]
JQuery kullanarak bir div innerHTML değiştirmek nasıl?
“Downstream” ve “upstream” un tanımı
Git: şube ödeme yapamıyor - error: pathspec '…' git olarak bilinen hiçbir dosyayla eşleşmedi
Statik bir HTML sayfasına favicon ekleme
Google Chrome'da HTTP başlıklarını görüntüle?
Eski bir taahhütten yeni bir Git şubesi nasıl oluşturabilirim? [çift]
Vim ve Ctags ipuçları ve püf noktaları [kapalı]
npm install vs. update - fark nedir?