Pytanie W jaki sposób nadać tekstowi lub obrazowi przezroczyste tło za pomocą CSS?


Czy to możliwe, używając tylko CSS, aby zrobić background elementu półprzezroczysty, ale ma zawartość (tekst i obrazy) elementu nieprzezroczysty?

Chciałbym to osiągnąć bez tekstu i tła jako dwóch oddzielnych 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>

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


1998
2018-04-30 09:00


pochodzenie


Niestety nie, celem CSS3 jest naprawienie tego za pomocą nowego modułu kolorów, pozwoliłoby to określić wartość alfa za każdym razem, gdy podajesz kolor. w3.org/TR/css3-color - meandmycode
Rzeczywiście, nieprzezroczystość elementów podrzędnych jest pomnożone według nieprzezroczystości elementu nadrzędnego, bez przesłonięcia. Na przykład jeśli pMiały nieprzezroczystość .6 i spanMiały nieprzezroczystość .5 to byłaby prawdziwa nieprzezroczystość tekstu w rozpiętości 0.3. - chharvey
Zgadnij, ale ponieważ to tło jest przezroczyste, nie potrzebujesz filtra / krycia: codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey co ma się wydarzyć, jeśli ja zdefiniuję opacity:.5 dla rodzica i opacity:2dla elementu dziecka? - Alexander
@Alexander, cieszę się, że zadałeś to pytanie. Matematycznie można by podejrzewać, że dziecko powróci do nieprzezroczystości 1. Jednakże opacity:2; jest nieprawidłowy CSS. Wartość opacity własność musi mieszczą się w zakresie włączającym [0,1]. - chharvey


Odpowiedzi:


Użyj półprzezroczystego PNG obraz lub użyj CSS3:

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

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


2115
2017-07-13 20:51



czy można to zrobić za pomocą kolorów szesnastkowych? Jak #fff? - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm: W3C rozważał wprowadzenie formatu kodu szesnastkowego #RRGGBBAA, ale postanowił tego nie robić (z różnych powodów), więc nie możemy. - outis
@grm z SASS Możesz, background-color: rgba(#000, .5); - Jürgen Paul
@outis: Dobra wiadomość, #RRGBGBAA jest teraz na poziomie kolorów 4. - BoltClock♦


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

Mało znaną sztuczką jest to, że możesz jej używać w Internet Explorerze, używając filtru gradientowego.

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

To jest z Przejrzystość tła CSS bez wpływu na elementy podrzędne, poprzez RGBa i filtry.

Zrzuty ekranu z wynikami:

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


456
2018-04-30 20:42



To wydaje się działać świetnie zarówno w IE6 i IE7 ... dzięki! - philfreo
Ale nie w IE8. Próbowałem nowej składni -ms-filter, ale nadal nie działa dla mnie :( - philfreo
Ten post pokazuje, jak to zrobić w IE8:robertnyman.com/2010/01/11/... - Slapout
@philfreo: Jeśli zmienisz pierwszy bit kodu Sebastiana na "background: rgb (0, 0, 0) transparent" powinien teraz działać w IE8. To mnie dręczyło od dłuższego czasu! - Tom Chantler
@AdrienBe - Edytowałem twoją odpowiedź zgodnie z twoimi instrukcjami. Niestety przez pewien czas znajdowałem się poza głównym obszarem tego pytania i odpowiedzi, więc nie mogę teraz dodać do tej rozmowy. - user664833


Jest to najlepsze rozwiązanie, jakie mogłem wymyślić, NIE używając CSS 3. Świetnie sprawdza się w Firefoksie, Chrome i Internet Explorerze, o ile widzę.

Umieść DIV kontenera i dwa DIV dziecka na tym samym poziomie, jeden dla treści, drugi dla tła. Używając CSS, automatycznie dopasuj tło, aby dopasować je do treści i umieść tło w rzeczywistości za pomocą z-index.

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


97
2018-05-24 16:07



Powiedział "Bez rozdzielania tekstu i tła w dwóch elementach położonych jeden nad drugim". Mimo to, jest to dobra poprawka i jest przydatna, ale w niektórych przypadkach chciałbyś, aby nieprzezroczysty element był dzieckiem półprzezroczystej. - Rolf
Odpowiedziałem prawie tak samo na innym pytaniu SO, ale dodałem proofy jsfiddle i screenshot (IE7 +), zobacz tutaj, jeśli zainteresowane 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 pseudo elementem jak :after i uniknąć dodatkowego marży? - AndFisher


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

Po prostu otwórz Photoshop, Stwórz 2x2 obraz pikselowy (owocobranie 1x1 moż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 i ustaw jako obraz tła:

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

Oczywiście działa świetnie, z wyjątkiem uroczych 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');
}

54
2017-10-05 08:15



Możesz użyć paint.net również. - Donny V.


Aby uzyskać prosty półprzezroczysty kolor tła, powyższe rozwiązania (obrazy CSS3 lub bg) są najlepszymi opcjami. Jednak chcesz zrobić coś ciekawszego (np. Animacja, wiele środowisk itp.) Lub jeśli nie chcesz polegać na CSS3, możesz wypróbować "technikę szyb":

.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 poprzez użycie dwóch "warstw" wewnątrz zewnętrznego elementu szyby:

  • jeden ("tył"), który pasuje do rozmiaru elementu szyby bez wpływu na przepływ treści,
  • i jeden ("cont"), który zawiera treść i pomaga określić rozmiar panelu.

The position: relative na panelu jest ważne; powtarza warstwę tylną, dopasowując ją do rozmiaru szyby. (Jeśli potrzebujesz <p> oznaczenie jako bezwzględne, zmień okienko z a <p> do a <span> i zawiń to wszystko w absolutnej pozycji <p> etykietka.)

Główną zaletą tej techniki nad podobnymi wymienionymi powyżej jest to, że szyba nie musi mieć określonego rozmiaru; jak zakodowano powyżej, będzie pasować do pełnej szerokości (normalny układ elementów blokowych) i tylko tak wysoka jak treść. Zewnętrzny element szyby może być wymiarowany w dowolny sposób, o ile jest prostokątny (tzn. Blok wbudowany zadziała, zwykły wbudowany nie będzie).

Ponadto daje ci dużo swobody w tle; możesz umieścić naprawdę wszystko w tylnym elemencie i nie wpływać na przepływ treści (jeśli chcesz wielu pełnowymiarowych podwarstwy, upewnij się, że mają one również pozycję: bezwzględna, szerokość / wysokość: 100%, i góra / dół / lewo / prawo: auto).

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

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

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

Rzeczy, na które należy zwrócić uwagę:

  • Elementy pływające wewnątrz warstwy kont nie będą zawarte. Musisz upewnić się, że są wyczyszczone lub w inny sposób zawarły, lub wymkną się z dołu.
  • Marginesy są umieszczane na elemencie panelu, a dopełnienie - na elemencie cont. Nie używaj odwrotności (marginesy na tle lub dopełnienie na panelu) lub odkryjesz osobliwości, takie jak strona zawsze nieznacznie szersza niż okno przeglądarki.
  • Jak już wspomniano, cała sprawa musi być blokowa lub wbudowana. Zapraszam do korzystania <div>s zamiast <span>s, aby uprościć Twój CSS.

Pełniejsze demo, pokazujące elastyczność tej techniki poprzez jej użycie w parze z display: inline-blocki z obu auto & konkretny 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>

A tutaj jest live demo szeroko stosowanej techniki:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



W jakiej sytuacji nie chciałbyś używać CSS3? - Burkely91
@ Burkely91 Jeśli możesz to zrobić w CSS3, to absolutnie tego używaj. Jednak 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 osiągnięcia przy pomocy CSS3 z powodu niezależnie powtarzających się krawędzi i wypełnień centralnych. Pamiętaj też, że ta odpowiedź została oryginalnie napisana 5 lat temu, zanim wsparcie CSS3 było szeroko rozpowszechnione. - Slipp D. Thompson
@Igor Ivancha Zwrócił swoje zmiany. Przykro mi, ale zmiana wcięcia z preferowanej formy (tabulacji) na twoją (2 spacje) nie jest fajna. Możesz mieć dobry powód, aby użyć wcięcia 2-spacji w swoich codziennych projektach kodu, ale dla prezentacji w Internecie uważam, że tabulatory mają wyraźną wygraną - głębsze wcięcie ułatwia rozpoznawanie poziomów hierarchii, a to daleko Łatwiej jest niezawodnie przekonwertować tabulatory na spacje i dlatego jest to bardziej kompatybilna forma dla wszystkich czytelników. - Slipp D. Thompson
@Igor Ivancha Wygląda na to, że uruchomiłeś kod przez upiększacz, który umieszcza każdy selektor i właściwość CSS w osobnej linii. Moje przykłady zostały napisane z celowymi przerwami w linii i odstępami, aby logicznie grupować części, które powinny być rozumiane wspólnie przez czytelnika - np. większość width: & height: właściwości dzielą linię, ponieważ są tego samego typu konstrukcją i lepiej rozumiane jako 2-wymiarowy kształt, a nie para 1-wymiarowych więzów. Co więcej, niektóre linie mają spory ładunek, ponieważ jest to powtarzająca się zawartość, która nie jest aż tak ważna, aby się pochwalić. - Slipp D. Thompson
@Igor Ivancha Logiczna organizacja, grupowanie i stylizacja jest niezwykle ważna dla pisania rozsądnego, zrozumiałego kodu, podobnie jak w przypadku wszelkiego rodzaju pism. Zmiany, które wprowadziłeś, były równoważne wprowadzeniu do postu i usunięciu wszystkich akapitów, a także wstawieniu wymuszonego znaku nowej linii po każdym zdaniu. Jeśli chcesz być tak pedantycznie pedantyczny w swojej pracy, dobrze, możesz to zrobić. Ale proszę nie ignoruj ​​semantycznego charakteru i ekspresji w pracy innych ludzi. - Slipp D. Thompson


Istnieje pewna sztuczka, aby zminimalizować znaczniki: Użyj a pseudo element jako tło i możesz ustawić przezroczystość bez wpływu na główny element i jego elementy podrzędne:

PRÓBNY

Wydajność:

Background opacity with a pseudo element

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>

Obsługa przeglądarki Internet Explorer 8 i później.


47
2018-01-14 00:14





Najprostszą metodą byłoby użycie półprzezroczystego tła Obraz PNG.

Możesz użyć JavaScriptu, aby to zadziałało Internet Explorer 6 Jeśli potrzebujesz.

Używam metody przedstawionej w Przejrzyste pliki PNG w Internet Explorerze 6.

Inne niż to,

możesz go sfałszować używając two side-by-side sibling elements - robić jeden półprzezroczysty, następnie absolutely position the other over the top?


23
2018-04-30 09:14



Wszystko, czego potrzebuję, to prosty kolor tła, jaki rozmiar PNG proponowałbym stworzyć tym kolorem? 1x1 sprawi, że renderowanie zajmie dużo pracy, zbyt wiele pikseli sprawia, że ​​ten PNG jest dość duży (powinien być ok rozmiaru pliku, ponieważ skompresowany, ale renderowanie musi go zdekompresować, aby go użyć) ... - Stijn Sanders
Polecam coś w rodzaju 30 x 30 pikseli, które zużywa mniej pamięci podczas renderowania, które powtarza się niż 1x1 i jest wciąż na tyle małe, aby zminimalizować wykorzystanie przepustowości. - Chris