CSS, wie Deckkraft des Containers aber nicht Text ändern?

Question

Ich bin ein kompletter Neuling, wenn es um HTML und CSS geht und ich baue meine allererste Website. Ich möchte ein Bild erstellen, das beim Überfahren Text anzeigt und das Bild auf eine niedrigere Deckkraft ausblendet. Ich habe das Ausblenden und die Änderung der Opazität. Mein einziges Problem ist, dass der Text, der in dem Element enthalten ist, das ich ausblenden möchte, auch verblasst und ich möchte es bei 100% Opazität behalten. Ich habe versucht, die Deckkraft für den Text auf 1 zu setzen, aber es überschreibt nicht die Deckkraftänderung seines Containers. Zum Beispiel habe ich:

<div class="textbox"> 

<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p> 

</div> 

Und auch

div.textbox { 
background-color: white; 
margin-left: 2.5vw; 
border: 2px solid lightgray; 
width: 15vw; 
height: 600px; 
float: left; 
} 

div.textbox:hover { 
background-color: lightgray; 
border: 2px solid lightgray; 
opacity: 0.5; 
} 

p.boxtext { 
margin: 5% 5%; 
} 

Dies schafft die schweben, die ich will, aber ich kann den Text Undurchsichtigkeit bei 100% nicht halten.

Edit: Vielen Dank für die Bereitstellung der rgba() Lösung, dies löst das Problem. Ich habe einen anderen Fall des gleichen Problems, außer dass es ein Hintergrundbild anstelle einer festen Hintergrundfarbe gibt. Gibt es eine ähnliche Problemumgehung?

Edit2: Probleme mit Fade Breaking nach dem Ersetzen der Deckkraft Änderung mit einem separaten transparenten. Png.

a#imglink1 { 
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg'); 
width: 200px; 
height: 200px; 
float: left; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s; 
} 

a#imglink1:hover { 
background-image: url('../images/apollo_transparent.png'); 
-o-transition: 1s; 
-ms-transition: 1s; 
-moz-transition: 1s; 
-webkit-transition: 1s; 
transition: 1s; 
} 

a#imglink1:hover p { 
visibility: visible; 
} 

Answer 1

Da Sie eine solide Hintergrundfarbe verwenden, können Sie rgba verwenden, um nur die Opazität der Hintergrund/Grenzen zu ändern und nicht den Inhalt innen beeinflussen. In Ihrem Beispiel:

div.textbox:hover { 
    background-color: rgba(222,222,222,.5); 
    border: 2px solid rgba(222,222,222,.5); 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

Für Bilder können Sie einen Fade mit :before und :after und Verblassen die Opazität dieser Elemente erreichen:

a#imglink2 { 
    width: 200px; 
    height: 200px; 
    float: left; 
    position: relative; 
} 
a#imglink2 p 
{ 
    position: relative; 
    z-index:2; 
} 

a#imglink2:before 
{ 
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif'); 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top:0; left:0; 
    content:''; 
    z-index:1; 
    opacity:1; 
    transition: .3s opacity linear; 
} 
a#imglink2:after 
{ 
    background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg'); 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top:0; left:0; 
    content:''; 
    z-index:1; 
    opacity:0; 
    transition: .3s opacity linear; 
} 
a#imglink2:hover:before 
{ 
    opacity:0; 
} 
a#imglink2:hover:after 
{ 
    opacity:1; 
} 

http://codepen.io/seraphzz/pen/ikJqB