Jak zrobić półprzezroczyste tło?

Chcę, aby białe tło było przezroczyste w 50%, nie wpływając na nic innego. Jak mam to zrobić?

Zastosowanie rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Zapewni to krycie 50%, podczas gdy zawartość pudełka będzie nadal miała krycie 100%.

Jeśli używasz opacity:0.5, zawartość zostanie wyblakła, podobnie jak tło. Dlatego nie używaj go.

To działa, ale wszystkie elementy podrzędne elementu z tą klasą również staną się przezroczyste, bez żadnego sposobu zapobiegania temu.

.css-class-name {
    opacity:0.8;
}

Jeśli chcesz, aby przezroczyste tło było szare, spróbuj:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Dobrze wiedzieć

Niektóre przeglądarki internetowe mają trudności z renderowaniem tekstu z cieniami na przezroczystym tle. Następnie możesz użyć półprzezroczystego obrazu PNG 1x1 jako tła.

Uwaga

Pamiętaj, że IE6 nie obsługuje plików PNG.

NIE używaj półprzezroczystego pliku PNG 1x1. Rozmiar PNG do 10x10, 100x100 itd. Cokolwiek ma sens na Twojej stronie. (Użyłem pliku PNG o wymiarach 200x200 i miał tylko 0,25 kb, więc nie ma tutaj żadnego problemu z rozmiarem pliku).

Po odwiedzeniu tego posta utworzyłem swoją stronę internetową z 3 plikami PNG 1x1 o różnej przezroczystości.

Dreamweaver CS5 czołgał się. Miałem flashowanie do DOS !!! Najwyraźniej za każdym razem, gdy próbowałem przewijać, wstawiać tekst, w zasadzie robić cokolwiek, DW próbował przeładować półprzezroczyste obszary 1x1 piksel na raz ... TAK!

Pomoc techniczna Adobe nawet nie wiedziała, na czym polega problem, ale powiedziała mi, żebym odbudował plik (nawiasem mówiąc, zadziałał w ich systemach). Dopiero gdy załadowałem pierwszy przezroczysty plik PNG do pliku css, dokument ponownie zanurkował.

Potem znalazłem post na innej stronie pomocy o awariach PNG programu Dreamweaver. Zwiększ rozmiar PNG; nie ma w tym żadnych wad.

Chociaż nieaktualna, żadna odpowiedź w tym wątku nie może być powszechnie używana. Używanie rgba do tworzenia przezroczystych kolorowych masek - to nie wyjaśnia dokładnie, jak to zrobić z obrazami tła.

Moje rozwiązanie działa w przypadku obrazów tła lub kolorowego tła.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

Spróbuj tego:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}