Jak nadać tekstowi lub obrazowi przezroczyste tło za pomocą CSS?

2283

Czy jest możliwe, używając tylko CSS, aby backgroundelement był półprzezroczysty, ale jego zawartość (tekst i obrazy) jest nieprzezroczysta?

Chciałbym to osiągnąć bez tekstu i tła jako dwóch osobnych elementów.

Podczas próby:

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>
Rozwiń fragment kodu

Wygląda na to, że elementy potomne podlegają nieprzezroczystości swoich rodziców, więc opacity:1jest względne w stosunku do opacity:0.6rodzica.

html  css  opacity 
— Stijn Sanders
źródło
16
Niestety nie, CSS3 dąży do naprawienia tego za pomocą nowego modułu kolorów, pozwoli to określić wartość alfa za każdym razem, gdy podasz kolor. w3.org/TR/css3-color
— meandmycode
71
W rzeczywistości krycie elementów potomnych jest mnożone przez krycie elementu macierzystego, a nie zastępowane. Na przykład, gdyby pkrycie było, .6a spankrycie było, .5wówczas prawdziwa krycie tekstu w zakresie byłoby 0.3.
— chharvey
1
Zgadnij, ale ponieważ jest to półprzezroczyste tło, nie potrzebujesz nawet filtra / krycia: codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey, co się stanie, jeśli zdefiniuję opacity:.5dla elementu nadrzędnego i opacity:2elementu podrzędnego?
— Alexander
10
@Alexander, cieszę się, że zadałeś to pytanie. Pod względem matematycznym można by podejrzewać, że dziecko wróci do nieprzezroczystości równej 1. Jednak opacity:2;jest to nieprawidłowy CSS . Wartość opacitywłaściwości musi zawierać się w przedziale obejmującym [0,1].
— chharvey

Odpowiedzi:

2276

Użyj półprzezroczystego obrazu PNG lub użyj CSS 3:

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

Oto artykuł z css3.info, Opacity, RGBA i kompromisu (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Rozwiń fragment kodu

— Peter Mortensen
źródło
86
czy można to zrobić z kolorami heksadecymalnymi? Jak #fff?
— grm
35
@grm: W3C rozważał wprowadzenie formatu szesnastkowego #RRGGBBAA, ale postanowili tego nie robić (z różnych powodów), więc nie możemy.
— poza
95
@grm z SASS Możesz,background-color: rgba(#000, .5);
— Jürgen Paul
2
Warto zauważyć, że jeśli chcesz używać przezroczystości, każda przeglądarka obsługująca RGBA obsługuje również HSLA , która jest znacznie bardziej intuicyjnym mapowaniem kolorów. IE8 jest jedyną pseudo znaczącą przeglądarką, która nie obsługuje jej, więc blokowanie to działa i używa HSL (A) dla każdego koloru.
— iono
19
@outis: Dobra wiadomość, #RRGGBBAA ma teraz kolor 4 .
— BoltClock
476

W Firefoksie 3 i Safari 3 możesz używać RGBA jak wspomniany Georg Schölly .

Mało znaną sztuczką jest to, że można jej używać również w Internet Explorerze za pomocą filtra gradientu.

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

Pierwsza liczba szesnastkowa określa wartość alfa koloru.

Pełne rozwiązanie dla wszystkich przeglądarek:

.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)";
}

Wynika to z przezroczystości tła CSS bez wpływu na elementy potomne, poprzez RGBa i filtry .

Zrzuty ekranu dowód wyników:

Dzieje się tak przy użyciu następującego kodu: 

 <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>

Chrome-33 IE11 IE9 IE8

— Adrien Be
źródło
1
Ale nie w IE8. Wypróbowałem nową składnię -ms-filter, ale nadal nie działała dla mnie :(
— philfreo
5
Ten post pokazuje, jak to zrobić w IE8: robertnyman.com/2010/01/11/…
— Slapout
14
@philfreo: Jeśli zmienisz pierwszy bit kodu Sebastiana na „background: rgb (0, 0, 0) transparentny”; powinien teraz działać w IE8. Martwiło mnie to od dłuższego czasu!
— Tom Chantler,
filter: progid Działa świetnie z IE 9. kolor to: przezroczystość, czerwony, zielony, niebieski - wszystkie dwucyfrowe wartości szesnastkowe.
— Thorsten Niehues,
1
@AdrienBe - Zredagowałem twoją odpowiedź zgodnie z twoimi instrukcjami. Niestety przez jakiś czas znajdowałem się poza obszarem tego konkretnego pytania i odpowiedzi, więc nie mogę teraz dodać do tej rozmowy.
— user664833
108

To najlepsze rozwiązanie, jakie mogłem wymyślić, NIE używając CSS 3. I o ile dobrze widzę, działa świetnie w Firefox, Chrome i Internet Explorer.

Umieść pojemnik divi dwoje dzieci divna tym samym poziomie, jeden dla zawartości, jeden dla tła. I używając CSS, automatycznie dopasuj rozmiar tła do zawartości i umieść tło faktycznie z tyłu za pomocą indeksu Z.

.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>
Rozwiń fragment kodu

— Gorkem Pacaci
źródło
19
Powiedział „Bez rozdzielania tekstu i tła na dwa elementy umieszczone nad sobą”. W każdym razie dzięki, jest to dobra poprawka i jest przydatna, ale w niektórych przypadkach chciałbyś, aby element nieprzezroczysty był dzieckiem elementu półprzezroczystego.
— Rolf,
Odpowiedziałem prawie tak samo na inne pytanie SO, ale dodałem dowody jsfiddle i zrzuty ekranu (IE7 +), zobacz tutaj, jeśli zainteresowany stackoverflow.com/a/21984546/759452
— Adrien Be
@Gorkem Pacaci: Upewnij się, że właściwości krycia są „naprawdę” w różnych przeglądarkach, możesz użyć tego fragmentu kodu z CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
— Adrien Be
Dlaczego nie zrobić tego z pseudoelementem :afteri uniknąć dodatkowych znaczników?
— AndFisher,
64

W przypadku prostego półprzezroczystego koloru tła powyższe rozwiązania (obrazy CSS3 lub bg) są najlepszymi opcjami. Jeśli jednak chcesz zrobić coś bardziej wymyślnego (np. Animację, wiele środowisk itp.) Lub jeśli nie chcesz polegać na CSS3, możesz wypróbować „technikę okienkową”:

.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>

Technika działa przy użyciu dwóch „warstw” wewnątrz zewnętrznego elementu szyby:

  • jeden („tył”), który pasuje do rozmiaru elementu okienka bez wpływu na przepływ treści,
  • i jeden („cd”), który zawiera treść i pomaga określić rozmiar okienka.

position: relativeNa panelu jest ważna; informuje tylną warstwę, aby dopasowała się do rozmiaru szyby. (Jeśli potrzebujesz, aby <p>znacznik był bezwzględny, zmień panel z a <p>na a <span>i zawiń wszystko w <p>znaczniku absolutnie ustawionym ).

Główną zaletą tej techniki w porównaniu do podobnych wymienionych powyżej jest to, że okienko nie musi mieć określonego rozmiaru; zgodnie z powyższym kodem zmieści się na całej szerokości (normalny układ elementów blokowych) i tylko tak wysoko, jak treść. Zewnętrzny element panelu może być dowolnie dopasowany, pod warunkiem, że jest prostokątny (tzn. Blok wstawiany będzie działał; zwykły wstawka nie będzie).

Daje też dużą swobodę w tle; możesz dowolnie umieszczać cokolwiek w tylnym elemencie i nie wpływać na przepływ treści (jeśli chcesz mieć wiele pełnowymiarowych podwarstw, upewnij się, że mają również pozycję: bezwzględną, szerokość / wysokość: 100%, oraz góra / dół / lewo / prawo: auto).

Jedną z odmian umożliwiającą regulację wstawki w tle (przez górny / dolny / lewy / prawy) i / lub przypinanie tła (poprzez usunięcie jednej pary lewej / prawej lub górnej / dolnej) jest użycie następującego CSS:

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

Jak napisano, działa to w Firefox, Safari, Chrome, IE8 + i Opera, chociaż IE7 i IE6 wymagają dodatkowego CSS i wyrażeń, IIRC, a kiedy ostatnio sprawdzałem, druga odmiana CSS nie działa w Operze.

Na co należy zwrócić uwagę:

  • Elementy pływające wewnątrz warstwy konturu nie będą zawarte. Musisz upewnić się, że są wyczyszczone lub w inny sposób zamknięte, albo wyślizgną się z dna.
  • Marginesy są umieszczane na elemencie panelu, a wypełnienie na elemencie cont. Nie używaj odwrotności (marginesy w kontakcie lub dopełnienie w okienku), bo zauważysz takie dziwactwa, że ​​strona zawsze jest nieco szersza niż okno przeglądarki.
  • Jak wspomniano, cała rzecz musi być blokowa lub wbudowana. Możesz użyć <div>s zamiast <span>s, aby uprościć swój CSS.

Pełniejsze demo, pokazujące elastyczność tej techniki poprzez użycie jej w parze z display: inline-block, oraz z obydwoma autoi konkretnymi widths / min-heights:

.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>
Rozwiń fragment kodu

A oto prezentacja na żywo szeroko stosowanej techniki:

zrzut ekranu christmas-card-2009.slippyd.com

— Slipp D. Thompson
źródło
W jakiej sytuacji nie chciałoby się do tego używać CSS3?
— Burkely91
@ Burkely91 Jeśli możesz to zrobić w CSS3, absolutnie tego użyj. Ale tło CSS3 nie obsługuje wszystkich typów treści ani pełnej elastyczności układu. Powyższy przykład koperty / litery byłby trudny do pobrania za pomocą CSS3 ze względu na niezależnie powtarzające się krawędzie i wypełnienie (-a) środkowe. Pamiętaj również, że ta odpowiedź została napisana 5 lat temu, zanim obsługa CSS3 została rozpowszechniona.
— Slipp D. Thompson
2
@Igor Ivancha Cofnął zmiany. Przepraszam, zmiana wcięcia z mojej preferowanej formy (tabulatorów) na twoją (2 spacje) nie jest fajna. Być może masz dobry powód, aby używać wcięć 2-przestrzeni w swoich codziennych projektach kodowych, ale uważam, że w przypadku prezentacji w Internecie wyraźną wygraną są zakładki - głębsze wcięcie ułatwia rozpoznanie poziomów hierarchii i jest daleko łatwiej jest niezawodnie konwertować tabulatory na spacje, a zatem jest bardziej kompatybilną formą wszystkich czytników.
— Slipp D. Thompson,
@Igor Ivancha Wygląda na to, że uruchomiłeś kod za pomocą upiększacza, który umieścił każdy selektor CSS i właściwość we własnej linii. Moje przykłady zostały napisane z celowymi podziałami linii i odstępami, aby logicznie pogrupować elementy, które czytelnik powinien zrozumieć razem - np. Większość width:i height:właściwości mają wspólną linię, ponieważ są one tego samego typu konstrukcją i lepiej rozumiane jako kształt dwuwymiarowy, a nie para wiązań 1-wymiarowych. Co więcej, niektóre wiersze są spakowane w znaczną ilość, ponieważ powtarzające się treści nie są aż tak ważne, aby się pochwalić.
— Slipp D. Thompson,
@Igor Ivancha Logiczna organizacja, grupowanie i stylizacja jest niezwykle ważna przy pisaniu zdrowego, zrozumiałego kodu, tak jak ma to miejsce w przypadku wszelkiego rodzaju pisania. Wprowadzone zmiany były równoznaczne z wejściem na kogoś i usunięciem wszystkich podziałów akapitów oraz umieszczeniem wymuszonego nowego wiersza po każdym zdaniu. Jeśli chcesz być tak tępo pedantyczny we własnej pracy, w porządku, możesz to zrobić. Ale proszę nie tępić semantycznego charakteru i ekspresji w pracach innych ludzi.
— Slipp D. Thompson,
58

Lepiej jest użyć półprzezroczystego.png .

Po prostu otwórz Photoshop , utwórz 2x2obraz pikselowy ( wybranie 1x1może spowodować błąd przeglądarki Internet Explorer! ), Wypełnij go zielonym kolorem i ustaw krycie w „zakładce Warstwy” na 60%. Następnie zapisz go i ustaw jako tło:

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

Oczywiście działa świetnie, z wyjątkiem uroczego programu Internet Explorer 6 . Dostępne są lepsze poprawki, ale oto szybki hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
— Społeczność
źródło
54

Istnieje sposób na zminimalizowanie znaczników: użyj pseudoelementu jako tła i możesz ustawić krycie na nim bez wpływu na główny element i jego elementy podrzędne:

PRÓBNY

Wynik:

Nieprzezroczystość tła z pseudoelementem

Odpowiedni 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>
Rozwiń fragment kodu

Obsługa przeglądarki to Internet Explorer 8 i nowsze wersje.

— web-tiki
źródło
23

Najłatwiejszą metodą byłoby użycie półprzezroczystego obrazu PNG w tle .

W razie potrzeby możesz użyć JavaScript, aby działał w Internet Explorerze 6 .

Korzystam z metody opisanej w przezroczystych plikach PNG w programie Internet Explorer 6 .

Poza tym możesz go sfałszować za pomocą dwóch bocznych elementów rodzeństwa - zrób jeden półprzezroczysty , a następnie absolutnie umieść drugi nad górą .

— Chris
źródło
2
Wszystko czego potrzebuję to prosty kolor tła, jaki rozmiar PNG zaproponowałbyś stworzyć za pomocą tego koloru? 1x1 sprawi, że renderowanie wykona dużo pracy, zbyt dużo pikseli sprawia, że ​​ten PNG jest dość duży (powinien być ok wielkości pliku od skompresowania, ale nadal renderowanie musi go rozpakować, aby go użyć) ...
— Stijn Sanders
3
Poleciłbym coś w rodzaju 30px x 30px, która zużywa mniej pamięci podczas renderowania powtarzającego się niż 1x1 i jest wciąż wystarczająco mała, aby zminimalizować wykorzystanie przepustowości.
— Chris
21

Ta metoda pozwala mieć obraz w tle, a nie tylko jednolity kolor, i może być używana do przezroczystości innych atrybutów, takich jak ramki. Nie są wymagane przezroczyste obrazy PNG.

Użyj :before(lub :after) w CSS i nadaj im wartość krycia, aby pozostawić element z oryginalnym kryciem. W ten sposób możesz użyć: przed, aby zrobić sztuczny element i nadać mu przezroczyste tło (lub obramowania), które chcesz, i przesunąć go za zawartość, z którą chcesz zachować nieprzejrzystość z-index.

Przykład ( skrzypce ) (zauważ, że DIVklasa with dadma tylko zapewnić kontekst i kontrast z kolorami, ten dodatkowy element w rzeczywistości nie jest potrzebny, a czerwony prostokąt jest przesunięty nieco w dół i w prawo, aby pozostawić widoczne tło z tyłu fancyBgelementu):

<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>

z tym CSS:

.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;
}

W tym przypadku .fancyBg:beforema właściwości CSS, które chcesz mieć z przezroczystością (w tym przykładzie czerwone tło, ale może to być obraz lub obramowanie). Jest pozycjonowany jako absolutny, aby przesunąć go w tył .fancyBg(użyj wartości zero lub cokolwiek bardziej odpowiedniego dla twoich potrzeb).

— frozenkoi
źródło
17

Problem polega na tym, że tekst w twoim przykładzie ma pełne krycie. Ma pełną nieprzezroczystość wewnątrz pznacznika, ale pznacznik jest tylko półprzezroczysty.

Możesz dodać półprzezroczysty obraz tła PNG zamiast realizować go w CSS lub podzielić tekst i podzielić na dwa elementy i przesunąć tekst nad ramką (na przykład margines ujemny).

W przeciwnym razie nie będzie to możliwe.

Tak jak wspomniał Chris: jeśli używasz pliku PNG z przezroczystością, musisz użyć obejścia JavaScript, aby działało w nieznośnym Internet Explorerze ...

— SvenFinke
źródło
15

Prawie wszystkie te odpowiedzi zakładają, że projektant chce mieć jednolity kolor tła. Jeśli projektant naprawdę chce zdjęcia jako tła, jedynym prawdziwym rozwiązaniem jest w tej chwili JavaScript, taki jak wspomniana gdzie indziej wtyczka jQuery Transify .

To, co musimy zrobić, to dołączyć do dyskusji grupy roboczej CSS i sprawić, by dali nam atrybut krycia tła! Powinno działać ręka w rękę z funkcją wielu środowisk.

— Thinsoldier
źródło
14

Oto jak to robię (może nie być optymalne, ale działa):

Utwórz ten div, który ma być półprzezroczysty. Nadaj mu klasę / identyfikator. Pozostaw to puste i zamknij. Daj mu ustawioną wysokość i szerokość (powiedzmy 300 na 300 pikseli). Daj mu krycie 0,5 lub cokolwiek chcesz i kolor tła.

Następnie, bezpośrednio poniżej tego div, utwórz kolejny div z inną klasą / id. Utwórz w nim akapit, w którym umieścisz swój tekst. Podaj divpozycję: względną i górną: -295px(to 295 pikseli ujemnych ). Nadaj mu indeks z 2 dla dobrej miary i upewnij się, że jego krycie wynosi 1. Nadaj styl akapitowi, jak chcesz, ale upewnij się, że wymiary są mniejsze niż pierwszego, divaby się nie przelał.

Otóż ​​to. Oto 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>
Rozwiń fragment kodu

Działa to w przeglądarce Safari 2.x, ale nie wiem o Internet Explorerze.

— Paryż Ionescu
źródło
Dodatkowego elementu można uniknąć i zamiast tego użyć pseudoelementu, takiego jak :beforelub:after
— frozenkoi
9

Jeśli jesteś facetem z Photoshopa , możesz także użyć:

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

Lub:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
— suraj rawat
źródło
8

Aby tło elementu było półprzezroczyste, ale jego zawartość (tekst i obrazy) były nieprzezroczyste, musisz napisać kod CSS dla tego obrazu i dodać jeden atrybut opacityo minimalnej wartości.

Na przykład,

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

// Im mniejsza wartość, tym bardziej będzie przezroczysta, lub wartość mniej będzie przezroczysta.

— Pushp Singh
źródło
Jest to jeden ze sposobów na to w nowoczesnych przeglądarkach. Łączę to z wartościami rgba jako rezerwą
— Tahir Khalid
Tak, poprawnie. Jest to jeden ze sposobów radzenia sobie z nowoczesną przeglądarką.
— Pushp Singh
Co rozumiesz przez „ruda mniej wartości będzie przezroczystością” (wydaje się to niezrozumiałe)? (Odpowiedz, edytując swoją odpowiedź , w razie potrzeby nie tutaj w komentarzach.)
— Peter Mortensen,
7

CSS 3 ma proste rozwiązanie twojego problemu. Posługiwać się:

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

Tutaj rgbaoznacza wartości czerwony, zielony, niebieski i alfa. Wartość zieloną uzyskuje się z powodu 255, a połowę przezroczystości uzyskuje się przy wartości 0,5 alfa.

— Touhid Rahman
źródło
Czym różni się to od niektórych poprzednich odpowiedzi?
— Peter Mortensen
6

kolor tła: rgba (255, 0, 0, 0,5); jak wspomniano powyżej, najlepsza odpowiedź jest po prostu postawiona. Używanie CSS 3, nawet w 2013 roku, nie jest proste, ponieważ poziom obsługi z różnych przeglądarek zmienia się z każdą iteracją.

Chociaż background-colorjest obsługiwany przez wszystkie główne przeglądarki (nie nowe w CSS 3) [1], przezroczystość alfa może być trudna, szczególnie w przypadku Internet Explorera wcześniejszego niż wersja 9 i koloru obramowania w Safari przed wersją 5.1. [2]

Korzystanie z czegoś takiego jak Compass lub SASS może naprawdę pomóc w produkcji i kompatybilności między platformami.

[1] W3Schools: Właściwość koloru tła CSS

[2] Blog Normana: Lista kontrolna obsługi przeglądarki CSS3 (październik 2012 r.)

— Will Nielsen
źródło
4

Możesz rozwiązać ten problem w programie Internet Explorer 8 przez (ab) przy użyciu składni gradientu. Format kolorów to ARGB. Jeśli korzystasz z preprocesora Sass , możesz konwertować kolory za pomocą wbudowanej funkcji „ie-hex-str ()”.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— Henrik
źródło
4

Można użyć czystego CSS 3 : rgba(red, green, blue, alpha), gdziealpha jest poziom przejrzystości chcesz. Nie ma potrzeby korzystania z JavaScript ani jQuery.

Oto przykład:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Peter Mortensen
źródło
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
źródło
2

Możesz to zrobić za rgba color codepomocą CSS, takiego jak ten przykład podany poniżej.

.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>
Rozwiń fragment kodu

— Rudra
źródło
1

Łatwiejszym rozwiązaniem jest nałożenie nakładki na obraz na ten sam div. To niewłaściwe użycie tego narzędzia. Ale działa jak urok, aby wykonać tę nakładkę za pomocą CSS.

Użyj wbudowanego cienia w ten sposób:

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

To wszystko :)

— edd2110
źródło
1

Możesz użyć RGBA (red, green, blue, alpha) w CSS . Coś takiego:

Więc po prostu robienie czegoś takiego będzie działać w twoim przypadku:

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

span {
  color: white;
}
— Alireza
źródło
1

Z mojego punktu widzenia najlepszym sposobem na użycie koloru tła z kryciem jest jak poniżej. Jeśli użyjemy tego, nie stracimy krycia dla innych elementów, takich jak kolor testowy, obramowanie itp.

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

Użyj koloru tła z kryciem

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

Wpisz opis zdjęcia tutaj

— Vinod Kumar
źródło
0

Zwykle używam tej klasy do mojej pracy. To całkiem nieźle.

.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 */
}
Rozwiń fragment kodu

— Cengkuru Michael
źródło
0

Działa dla mnie, gdy korzystałem z formatu, #AARRGGBBwięc ten, który dla mnie działał, był #1C00ff00. Spróbuj, bo widziałem, że działa dla niektórych, a nie dla kogoś innego. Używam go w CSS.

— Donald Shahini
źródło
0

Możesz użyć wartości krycia dołączonej do wartości szesnastkowej:

background-color: #11ffeeaa;

W tym przykładzie aajest nieprzezroczystość. Nieprzezroczystość 00oznacza przezroczystość i ffoznacza jednolity kolor.

Krycie jest opcjonalne, więc możesz zawsze używać wartości szesnastkowej:

background-color: #11ffee;

Możesz także użyć starego sposobu z rgba():

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

I backgroundstenografia, jeśli chcesz się upewnić, że tło nie ma innych stylów, takich jak obrazy lub gradienty:

background: #11ffeeaa;

Ze specyfikacji Mozilli ( 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
źródło
-2

Możesz użyć koloru RGB z nieprzezroczystością, jak kod koloru w RGB (63, 245, 0) i dodać nieprzezroczystość (jak 63, 245, 0, 0,5), a także zamienić RGB na RGBA. Ama być używany do krycia.

div {
  background: rgba(63, 245, 0, 0.5);
}
Rozwiń fragment kodu

— Vijay Sharma
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.