CSS kullanarak metin veya görüntüye nasıl şeffaf bir arka plan verebilirim?

2283

Yalnızca CSS kullanarak backgroundbir öğeyi yarı saydam yapmak, ancak öğenin içeriğini (metin ve görüntüler) opak yapmak mümkün müdür ?

Bunu, metin ve arka plana iki ayrı öğe olmadan sahip olmak istiyorum.

Denerken:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>
Snippet'i genişlet

Alt öğelerin ebeveynlerinin opaklığına maruz kaldığı anlaşılıyor, bu nedenle ebeveynin opacity:1göreceliğine göre opacity:0.6.

html  css  opacity 
— Stijn Sanders
kaynak
16
Ne yazık ki, CSS3 bunu yeni renk modülü ile düzeltmeyi hedefliyor, bir renk belirttiğinizde bir alfa değeri belirtmenize izin verecektir. w3.org/TR/css3-color
— meandmycode
71
Aslında, alt öğelerin opaklığı, geçersiz kılınan üst öğenin opaklığı ile çarpılır . Örneğin, p'opaklığı .6ve span' opaklığı .5olsaydı, yayılma alanındaki metnin gerçek opaklığı olurdu 0.3.
— chharvey
1
Tahmin edin, ancak yarı saydam arka plan olduğundan, filtreye / opaklığa bile ihtiyacınız yoktur: codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey opacity:.5Ana opacity:2öğeyi ve alt öğeyi tanımlarsam ne olur ?
— Alexander
10
@Alexander, bu soruyu sorduğun için mutluyum. Matematiksel olarak, bir çocuk Ancak 1. bir donukluk geri döneceğini şüpheli, opacity:2;ise geçersiz CSS . Değeri opacityözelliği olmalıdır dahil aralığında [0,1] içinde.
— chharvey

Yanıtlar:

2276

Yarı saydam PNG görüntüsü kullanın veya CSS 3 kullanın:

background-color: rgba(255, 0, 0, 0.5);

İşte css3.info, Opacity, RGBA ve uzlaşma (2007-06-03) makalesi .

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Snippet'i genişlet

— Peter Mortensen
kaynak
86
Bunu onaltılık renklerle yapmak mümkün mü? #Fff gibi mi?
— grm
35
@grm: W3C #RRGGBBAA onaltılı kod biçimini tanıtmayı düşündü, ancak (çeşitli nedenlerle) karar vermemeye karar verdiler, bu yüzden yapamayız.
— outis
95
ile @grm SASS Yapabilirsin,background-color: rgba(#000, .5);
— Jürgen Paul
2
Şeffaflığı kullanmak istiyorsanız , RGBA'yı destekleyen her tarayıcının da çok daha sezgisel bir renk eşlemesi olan HSLA'yı desteklediğini belirtmek gerekir . IE8, onu desteklemeyen tek sahte tarayıcıdır, bu nedenle devam eden ve her renk için HSL (A) kullanan engelleme.
— iono
19
@outis: İyi haber, #RRGGBBAA şimdi Renk seviyesi 4'te .
— BoltClock
476

Firefox 3 ve Safari 3'te, Georg Schölly'nin belirttiği gibi RGBA'yı kullanabilirsiniz .

Bilinen bir hile, degrade filtresini kullanarak Internet Explorer'da da kullanabilmenizdir.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

İlk onaltılık sayı rengin alfa değerini tanımlar.

Tüm tarayıcılarda tam çözüm:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Bu, RGBa ve filtreler aracılığıyla alt öğeleri etkilemeden CSS arka plan saydamlığından gelir .

Sonuçların ekran kanıtı:

Bu, aşağıdaki kodu kullanırken: 

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Krom-33 IE11 IE9 IE8

— Adrien Be
kaynak
1
Ancak IE8'de değil. Yeni -ms-filter sözdizimini denedim ama yine de benim için çalışmadı :(
— philfreo
5
Bu yazı IE8'de
— Slapout
14
@philfreo: Sebastian'ın kodunun ilk bitini "background: rgb (0, 0, 0) şeffaf;" olarak değiştirirseniz şimdi IE8'de çalışmalıdır. Bu beni oldukça uzun bir süre rahatsız ediyordu!
— Tom Chantler
filter: progid IE 9 ile mükemmel çalışır. renk: saydamlık, kırmızı, yeşil, mavi - tüm iki basamaklı onaltılık değerler.
— Thorsten Niehues
1
@AdrienBe - Cevabınızı talimatlarınıza göre düzenledim. Maalesef bir süredir bu özel Soru-Cevap bölümünün dışında kaldım, şu anda bu sohbete ekleyemiyorum.
— user664833
108

Bu, CSS 3 kullanarak DEĞİL, gelip en iyi çözümdür. Ve gördüğüm kadarıyla Firefox, Chrome ve Internet Explorer'da harika çalışıyor.

Bir kap divve iki çocuk divaynı düzeyde, biri içerik için, diğeri arka plan için koyun . Ve CSS kullanarak, içeriğe uyacak şekilde arka planı otomatik olarak boyutlandırın ve z-endeksini kullanarak arka planı gerçekten arkaya koyun.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
Snippet'i genişlet

— Görkem Pacacı
kaynak
19
"Metni ve arka planı birbirinin üzerine yerleştirilmiş iki öğeden ayırmadan" dedi. Yine de teşekkürler, bu iyi bir düzeltmedir ve yararlıdır, ancak bazı durumlarda opak öğenin yarı saydam olanın bir çocuğu olmasını istersiniz.
— Rolf
Başka bir SO sorusunda hemen hemen aynı cevabı verdim, ancak bir jsfiddle ve ekran görüntüsü kanıtları (IE7 +) ekledim, ilgilenen olup olmadığını buraya bakın stackoverflow.com/a/21984546/759452
— Adrien
@Gorkem Pacaci: Opaklık özelliklerinin "gerçekten" çapraz tarayıcı olduğundan emin olun, bu kod snippet'ini CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
— Adrien Be
Neden :afterfazladan işaretleme gibi sahte bir öğe ile yapmıyorsunuz ?
— AndFisher
64

Basit bir yarı saydam arka plan rengi için yukarıdaki çözümler (CSS3 veya bg görüntüleri) en iyi seçeneklerdir. Bununla birlikte, meraklı bir şey yapmak istiyorsanız (örn. Animasyon, çoklu arka planlar vb.) Veya CSS3'e güvenmek istemiyorsanız, “bölme tekniği” ni deneyebilirsiniz:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Teknik, dış panel elemanının içinde iki “katman” kullanarak çalışır:

  • içerik akışını etkilemeden bölme öğesinin boyutuna uyan bir ("arka"),
  • ve içeriği içeren ve bölmenin boyutunun belirlenmesine yardımcı olan bir ("devam").

Açık position: relativebölmesi önemlidir; katmana bölmenin boyutuna sığmasını 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 göre ana avantajı, bölmenin belirli bir boyutta olması gerekmemesidir; yukarıda kodlandığı gibi, tam genişliğe (normal blok elemanı düzeni) ve yalnızca içerik kadar yüksek olacaktır. Dış bölme elemanı, dikdörtgen olduğu sürece istediğiniz şekilde boyutlandırılabilir (yani satır içi blok çalışır; düz eski satır içi çalışmaz).

Ayrıca, arka plan için size çok fazla özgürlük verir; arka öğeye gerçekten herhangi bir şey koymakta özgürsünüz ve içerik akışını etkilememesini sağlar (birden fazla tam boyutlu alt katman istiyorsanız, sadece konumlarının da olduğundan emin olun: mutlak, genişlik / yükseklik:% 100, ve üst / alt / sol / sağ: otomatik).

Arka plan ek ayarına (üst / alt / sol / sağ yoluyla) ve / veya arka plan sabitlemeye (sol / sağ veya üst / alt çiftlerinden birini kaldırarak) izin vermek için bir varyasyon, aşağıdaki CSS'yi kullanmaktır:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Yazıldığı gibi, bu Firefox, Safari, Chrome, IE8 + ve Opera'da çalışır, ancak IE7 ve IE6 ekstra CSS ve ifadeler, IIRC gerektirir ve son kontrol ettiğimde ikinci CSS varyasyonu Opera'da çalışmaz.

Dikkat edilmesi gerekenler:

  • Devam eden katmanın içindeki yüzer elemanlar bulunmayacaktır. Temizlendiğinden veya başka bir şekilde içerildiğinden emin olmanız gerekir, aksi takdirde alttan dışarı kayarlar.
  • Kenar boşlukları bölme elemanına, dolgu ise devam elemanına gider. Tersini kullanmayın (devam eden kenar boşlukları veya bölmedeki dolgu) veya sayfa tarayıcı penceresinden her zaman biraz daha geniş olan tuhaflıkları keşfedeceksiniz.
  • Belirtildiği gibi, her şeyin blok veya satır içi blok olması gerekir. CSS'nizi basitleştirmek için <div>s yerine <span>s kullanmaktan çekinmeyin .

Bu tekniğin esnekliğini, display: inline-blockhem auto& hem de belirli widths / s'lerle birlikte kullanarak gösteren daha dolu bir demo min-height:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
Snippet'i genişlet

Ve burada yaygın olarak kullanılan tekniğin canlı bir demosu :

christmas-card-2009.slippyd.com ekran görüntüsü

— Slipp D.Thompson
kaynak
Hangi durumda bunun için CSS3 kullanmak istemez?
— Burkely91
@ Burkely91 CSS3 ile yapabiliyorsanız, kesinlikle kullanın. Ancak CSS3 arka planı her türlü içeriği veya tam düzen esnekliğini desteklemez. Yukarıdaki zarf / harf örneği, bağımsız olarak tekrarlanan kenarlar ve merkez dolgu (lar) nedeniyle CSS3 ile çekilmesi zor olacaktır. Ayrıca, bu cevabın orijinal olarak 5 yıl önce, CSS3 desteği yaygınlaşmadan yazıldığını unutmayın.
— Slipp D.Thompson
2
@Igor Ivancha Yaptığınız değişiklikleri geri aldı. Maalesef girintiyi tercih ettiğim formdan (sekmelerden) kendinize (2 boşluk) değiştirmek hoş değil. Günlük kod projelerinizde 2 boşluklu girinti kullanmak için iyi bir nedeniniz olabilir, ancak web'de sunum için sekmelerin açık bir kazanım olduğuna inanıyorum - daha derin girintiler hiyerarşi düzeylerini ayırt etmeyi kolaylaştırıyor ve çok uzak sekmeleri boşluklara güvenilir bir şekilde dönüştürmek daha kolaydır ve bu nedenle tüm okuyucuların daha uyumlu bir formudur.
— Slipp D.Thomp
@Igor Ivancha Ayrıca, kodu her CSS seçicisini ve özelliğini kendi satırına koyan bir güzelleştirici aracılığıyla çalıştırdınız. Örneklerim, okuyucu tarafından birlikte anlaşılması gereken parçaları mantıksal olarak gruplamak için kasıtlı satır sonları ve boşluklarla yazılmıştır - örneğin, çoğu width:& height:özellik bir satırı paylaşır, çünkü aynı yapıdadırlar ve daha iyi bir 2 boyutlu şekil olarak anlaşılırlar, bir çift 1 boyutlu kısıtlama. Ayrıca, bazı satırların içinde adil bir miktar var, çünkü göstermek için o kadar da önemli olmayan tekrarlanan içerik.
— Slipp D.Thomp
@Igor Ivancha Mantıksal organizasyon, gruplama ve stil, aklı başında, anlaşılır kod yazmak için, her türlü yazımda olduğu gibi son derece önemlidir. Yaptığınız değişiklikler, birisine yazı göndermeye ve tüm paragraf sonlarını kaldırmaya ve her cümlenin ardından zorunlu bir satırsonu yazmaya eşdeğerdi. Eğer kendi işinizde bu kadar bilgiçlikçi olmak istiyorsanız, bunu yapmakta özgürsünüz. Ama lütfen diğer insanların çalışmalarındaki anlamsal karakteri ve ifadeyi aptallaştırmayın.
— Slipp D.Thomp
58

Yarı saydam kullanmak daha iyidir.png .

Photoshop'u açın , bir 2x2piksel görüntüsü oluşturun ( toplama 1x1bir Internet Explorer hatasına neden olabilir! ), Yeşil renkle doldurun ve "Katmanlar sekmesindeki" opaklığı% 60'a ayarlayın. Ardından kaydedin ve arka plan resmi yapın:

<p style="background: url(green.png);">any text</p>

Güzel Internet Explorer 6 dışında elbette harika çalışıyor . Kullanılabilecek daha iyi düzeltmeler var, ancak işte hızlı bir saldırı:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
— Topluluk
kaynak
54

İşaretlemeyi en aza indirecek bir hile var: Arka plan olarak sahte bir öğe ve ana öğeyi ve alt öğelerini etkilemeden opaklığı ayarlayabilirsiniz:

DEMO

Çıktı:

Sahte bir elemanla arka plan opaklığı

İlgili kod:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
Snippet'i genişlet

Tarayıcı desteği Internet Explorer 8'dir ve üstüdür.

— web tiki
kaynak
23

En kolay yöntem, yarı saydam bir arka plan PNG görüntüsü kullanmak olacaktır .

Gerekirse , Internet Explorer 6'da çalışmasını sağlamak için JavaScript'i kullanabilirsiniz .

Internet Explorer 6'da Şeffaf PNG'lerde özetlenen yöntemi kullanıyorum .

Bunun dışında, iki yan yana kardeş eleman kullanarak taklit edebilirsiniz - birini yarı şeffaf hale getirin , sonra diğerini kesinlikle üste yerleştirin .

— Chris
kaynak
2
İhtiyacım olan tek şey basit bir arka plan rengidir, bu renkle oluşturmamı hangi boyutta PNG önerirsiniz? 1x1 oluşturmanın çok fazla iş yapmasını sağlar, çok fazla piksel bu PNG'yi oldukça büyük hale getirir (sıkıştırıldığından beri dosya boyutunda olması gerekir, ancak yine de oluşturmanın onu kullanmak için sıkıştırması gerekir) ...
— Stijn Sanders
3
30x1 x 30 piksel gibi bir şey öneriyorum, bu yineleme işlemi 1x1'den daha az işlenirken ve bant genişliği kullanımını en aza indirecek kadar küçük.
— Chris
21

Bu yöntem, yalnızca düz bir renge değil, arka planda bir görüntüye sahip olmanıza olanak tanır ve kenarlıklar gibi diğer niteliklerde saydamlığa sahip olmak için kullanılabilir. Şeffaf PNG görüntüleri gerekmez.

CSS'de :before(veya :after) kullanın ve öğeyi orijinal opaklığında bırakmak için opaklık değerini verin. Böylece şunları kullanabilirsiniz: önce sahte bir öğe yapmak ve ona şeffaf arka plan (veya kenarlıklar) vermek ve opak tutmak istediğiniz içeriğin arkasına taşımakz-index .

Bir örnek ( keman ) ( DIVwith with sınıfının dadrenklere bir miktar bağlam ve kontrast sağlamak olduğunu, bu ekstra öğeye gerçekten gerek olmadığını ve kırmızı dikdörtgenin biraz aşağıya ve sağa doğru hareket ettiğini ve arka planı görünür durumda bırakacağını unutmayın. fancyBgöğesi):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

bu CSS ile:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

Bu durumda .fancyBg:before, saydamlıkla olmasını istediğiniz CSS özelliklerine sahiptir (bu örnekte kırmızı arka plan, ancak bir görüntü veya kenarlıklar olabilir). Arkasına taşımak için mutlak olarak konumlandırılmıştır .fancyBg(sıfır veya ihtiyaçlarınız için daha uygun olan değerleri kullanın).

— frozenkoi
kaynak
17

Sorun, metnin örneğinizde aslında tam opaklığa sahip olmasıdır . pEtiketin içinde tam opaklığa sahiptir , ancak petiket sadece yarı şeffaftır.

CSS'de gerçekleştirmek yerine yarı saydam bir PNG arka plan görüntüsü ekleyebilir veya metni ve div öğesini iki öğeye ayırabilir ve metni kutunun üzerine taşıyabilirsiniz (örneğin, negatif kenar boşluğu).

Aksi takdirde mümkün olmaz.

Tıpkı Chris'in de bahsettiği gibi: şeffaflık içeren bir PNG dosyası kullanıyorsanız, sinir bozucu Internet Explorer'da çalışmasını sağlamak için bir JavaScript geçici çözümü kullanmanız gerekir ...

— SvenFinke
kaynak
15

Hemen hemen tüm bu cevaplar tasarımcının düz renk arka plan istediğini varsayar. Tasarımcı aslında arka plan olarak bir fotoğraf istiyorsa, şu anda tek gerçek çözüm, başka bir yerde bahsedilen jQuery Transify eklentisi gibi JavaScript'tir .

Yapmamız gereken CSS çalışma grubu tartışmasına katılmak ve bize arka plan opaklık özelliği kazandırmak! Çoklu arkaplan özelliği ile el ele çalışmalıdır.

— thinsoldier
kaynak
14

İşte bunu nasıl yapacağım (optimal olmayabilir, ama işe yarıyor):

divYarı şeffaf olmasını 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 x 300 piksel). Ona 0,5 veya istediğiniz gibi bir opaklık ve bir arka plan rengi verin.

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. divKonumu verin : göreli ve üst: -295px( negatif 295 piksel). İyi bir ölçüm için 2'lik bir z-endeksi verin ve opaklığının 1 olduğundan emin olun. Paragrafınıza istediğiniz gibi stil verin, ancak boyutların birinciden daha küçük olduğundan emin olun, divböylece taşmaz.

Bu kadar. İşte kod:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>
Snippet'i genişlet

Bu Safari 2.x çalışır, ancak Internet Explorer hakkında bilmiyorum.

— paris ionescu
kaynak
Ekstra unsurdan kaçınılabilir ve bunun yerine :beforeveya:after
— frozenkoi
9

Eğer bir ise Photoshop adam, ayrıca kullanabilirsiniz:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Veya:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
— suraj çiğneme
kaynak
8

Bir öğenin arka planını yarı saydam yapmak, ancak öğenin içeriğini (metin ve görüntüler) opak hale getirmek için, o görüntü için CSS kodu yazmanız ve opacityminimum değerle adlandırılan bir özellik eklemeniz gerekir .

Örneğin,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Değer ne kadar küçük olursa, o kadar şeffaf olur, daha az değer şeffaflık olur.

— Pushp Singh
kaynak
Modern tarayıcılarda bunu yapmanın bir yolu budur. Bunu rgba değerleri ile bir geri dönüş olarak birleştiriyorum
— Tahir Khalid
Evet doğru. Bu, modern tarayıcıyla başa çıkmanın yollarından biridir.
— Pushp Singh
Ne demek istiyorsunuz "cevher daha az değer şeffaflık olacak" (anlaşılmaz gibi görünüyor)? ( Cevabınızı düzenleyerek yanıtlayın , uygunsa burada yorumlarda
— Peter Mortensen
7

CSS 3, sorunun kolay bir çözümüne sahiptir. kullanın:

background-color:rgba(0, 255, 0, 0.5);

Burada rgbakı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ğeriyle elde edilir.

— Touhid Rahman
kaynak
Bu önceki cevaplardan nasıl farklı?
— Peter Mortensen
6

arka plan rengi: rgba (255, 0, 0, 0.5);yukarıda belirtildiği gibi basitçe koymak en iyi cevaptır. 2013'te bile CSS 3'ü kullanmak basit değildir, çünkü çeşitli tarayıcılardan gelen destek seviyesi her yinelemeyle değişir.

Süre background-color , tüm büyük tarayıcılar (CSS 3 için yeni değil) [1] 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. [2]

Compass veya SASS gibi bir şey kullanmak gerçekten üretime ve platformlar arası uyumluluğa yardımcı olabilir.

[1] W3Schools: CSS arka plan rengi Özellik

[2] Norman'ın Blogu: Tarayıcı Desteği Kontrol Listesi CSS3 (Ekim 2012)

— Will Nielsen
kaynak
4

Degrade sözdizimini kullanarak (ab) ile Internet Explorer 8 için bunu çözebilirsiniz . Renk biçimi 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.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— Henrik
kaynak
4

Sen saf kullanabilirsiniz CSS 3 : rgba(red, green, blue, alpha)neredealpha istediğiniz şeffaflık düzeyidir. JavaScript veya jQuery'ye gerek yoktur.

İşte bir örnek:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Peter Mortensen
kaynak
3 
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
kaynak
2

rgba color codeAşağıda verilen bu örnek gibi CSS kullanarak yapabilirsiniz .

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
Snippet'i genişlet

— Rudra
kaynak
1

Aynı div'deki bir görüntünün üzerine bindirme koymak için daha kolay bir çözüm var. Bu aracın doğru kullanımı değil. Ancak bu yerleşimi CSS kullanarak yapmak için bir cazibe gibi çalışır.

Aşağıdaki gibi bir iç gölge kullanın:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Bu kadar :)

— edd2110
kaynak
1

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 yarayacaktır:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
— Alireza
kaynak
1

Benim görüşüme göre, opaklıkla arka plan rengini kullanmanın en iyi yolu aşağıdaki gibidir. Bunu kullanırsak, test rengi, kenarlık vb.Gibi diğer öğeler için opaklığı kaybetmeyeceğiz.

background-color: rgba(71, 158, 0, 0.8);

Opaklıkla arka plan rengini kullanma

background-color: rgba(R, G, B, Opacity);

Resim açıklamasını buraya girin

— Vinod Kumar
kaynak
0

Normalde bu sınıfı işim için kullanıyorum. Oldukça iyi.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
Snippet'i genişlet

— Cengkuru Michael
kaynak
0

Biçimini kullanarak zaman benim için çalıştı #AARRGGBBbenim için çalışıyor biriydi bu yüzden #1C00ff00. Bir deneyin, çünkü bazıları için çalıştığını ve başkası için çalışmadığını gördüm. CSS'de kullanıyorum.

— Donald Shahini
kaynak
0

Onaltılık değere eklenmiş opaklık değerini kullanabilirsiniz:

background-color: #11ffeeaa;

Bu örnekte aaopaklık var. Bir opaklık 00şeffaf araç ve ffaracı düz renk.

Opaklık isteğe bağlıdır, bu nedenle onaltılık değeri her zamanki gibi kullanabilirsiniz:

background-color: #11ffee;

Eski yöntemi aşağıdakilerle de kullanabilirsiniz rgba():

background-color: rgba(117, 190, 218, 0.5);

backgroundArka planın resimler veya degradeler gibi başka stilleri olmadığından emin olmak için stenografi:

background: #11ffeeaa;

Mozilla'nın şartnamesinden ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
— AMS777
kaynak
-2

RGB rengini, RGB'deki renk kodu gibi opaklıkla (63, 245, 0) kullanabilir ve opaklık (63, 245, 0, 0.5 gibi) ekleyebilir ve RGB'yi RGBA ile değiştirebilirsiniz. Aopaklık için kullanılmalıdır.

div {
  background: rgba(63, 245, 0, 0.5);
}
Snippet'i genişlet

— Vijay Sharma
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.