Wie mache ich einen halbtransparenten Hintergrund?

Ich muss einen weißen Hintergrund zu 50% transparent machen, ohne etwas anderes zu beeinflussen. Wie mache ich es?

Verwendung rgba():

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

Dadurch erhalten Sie eine Deckkraft von 50%, während der Inhalt der Box weiterhin eine Deckkraft von 100% aufweist.

Wenn Sie verwenden opacity:0.5, werden sowohl der Inhalt als auch der Hintergrund ausgeblendet. Verwenden Sie es daher nicht.

Dies funktioniert, aber alle untergeordneten Elemente des Elements mit dieser Klasse werden auch transparent, ohne dass dies verhindert werden kann.

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

Wenn Sie transparenten Hintergrund grau machen möchten, versuchen Sie bitte:

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

Gut zu wissen

Einige Webbrowser haben Schwierigkeiten, Text mit Schatten auf transparentem Hintergrund zu rendern. Dann können Sie ein halbtransparentes 1x1 PNG-Bild als Hintergrund verwenden.

Hinweis

Denken Sie daran, dass IE6 keine PNG-Dateien unterstützt.

Verwenden Sie KEIN halbtransparentes 1x1-PNG. Passen Sie die Größe des PNG auf 10 x 10, 100 x 100 usw. an. Was auch immer auf Ihrer Seite sinnvoll ist. (Ich habe ein 200x200 PNG verwendet und es war nur 0,25 kb groß, daher gibt es hier keine wirklichen Bedenken hinsichtlich der Dateigröße.)

Nach dem Besuch dieses Beitrags habe ich meine Webseite mit 3, 1x1 PNGs mit unterschiedlicher Transparenz erstellt.

Dreamweaver CS5 tankte. Ich hatte Flashbacks zu DOS !!! Anscheinend versuchte DW jedes Mal, wenn ich versuchte zu scrollen, Text einzufügen, im Grunde alles zu tun, die halbtransparenten Bereiche jeweils 1x1 Pixel neu zu laden ... YIKES!

Der technische Support von Adobe wusste nicht einmal, wo das Problem lag, sagte mir jedoch, ich solle die Datei neu erstellen (sie funktionierte übrigens auf ihren Systemen). Erst als ich das erste transparente PNG in die CSS-Datei lud, tauchte das Dokument wieder tief ein.

Dann fand ich auf einer anderen Hilfeseite einen Beitrag über PNGs, die Dreamweaver zum Absturz bringen. Vergrößern Sie Ihr PNG. Das hat keinen Nachteil.

Obwohl datiert, kann nicht eine Antwort auf diesen Thread universell verwendet werden. Verwenden von rgba zum Erstellen transparenter Farbmasken - das erklärt nicht genau, wie dies mit Hintergrundbildern gemacht wird.

Meine Lösung funktioniert für Hintergrundbilder oder farbige Hintergründe.

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

Versuche dies:

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