Transparenz des Hintergrundbild ändern ohne das sich die Transparenz der Objekte ändert

[gamma]

Ich möchte auf meiner Seite die Transparent des Hintergrunds ändern. Wenn ich das mit dem Befehl "opacity" mache dann ändert sich auch die Transparenz meiner Buttons. Wie kann ich das umgehen?

@media screen and (min-width: 800px) //Mein Button
{
a
    {
    
    background:black;
    padding:6px 12px;
    color:white; 
    font-size:23px;
    text-align:center;
    display: inline-block;
    cursor: pointer;
    float: left;
    }
}

@media screen and (min-width: 400px) //Die Titelseite auf der ich die Transparenz ändern möchte
{
#first
    {
    background:url("home_pic2.jpg");
    opacity: 0.8;   
    background-size: 100% 110%;
    
    }


}

 

[Sailor]

background-color: rgba(200, 200, 200, 0.8);

r g b Werte dezimal - nach eigenen Wünschen einstellbar.
a Wert (mit Dezimalpunkt nicht mit Komma) setzt Deckkraft des Hintergrunds.

 

[Sailor]

uuppss... ich sehe gerade, ist natürlich Quatsch was ich da vorgeschlagen habe... du meinst das Hintergrundbild und nicht die Hintergrundfarbe.
Das geht so nicht.... aber du könntest folgendes testen:
Weise das Hintergrundbild dem Elternelement von #first zu (sollte #first noch kein Elternelement haben, dann mach einfach ein div drum herum) - und dann gib dem #first, wie ich beschrieben habe eine transparente Hintergrundfarbe.
Das ist zwar nicht ganz das, was du meinst, aber der Effekt ist ähnlich!

 

[Aaron3219]

Naja anstatt eines Hintergrundbildes könntest du auch einfach ein Bild in den Hintergrund setzen (<img>).
Opacity greift dann nur beim Bild.

 

[djheke]

So geht's auch.

html,body {
height:100%;
}
html {
background:url(bild.jpg) 0 0 no-repeat;
background-size:cover;
}

body {
background: rgba(0,0,0,0.5);
}