CSS如何改变容器的不透明度而不是文本？

Question

在 HTML 和 CSS 方面，我是一个完全的新手，并且刚刚建立我的第一个网站。我想创建一个图像，在悬停时显示文本并将图像淡化为较低的不透明度。我已经解决了所有的褪色问题，以及不透明度的变化。我唯一的问题是包含在我想要淡出的元素中的文本也会淡出，我希望将其保持为 100% 的不透明度。我尝试将文本的不透明度设置为 1，但它不会覆盖其容器的不透明度更改。例如，我有：

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

还有

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%;
}

这会创建我想要的悬停，但我无法将文本不透明度保持在 100%。

编辑：感谢您提供 rgba() 解决方案，这解决了问题。除了有背景图像而不是纯背景颜色之外，我还有另一个相同问题的情况。有没有类似的解决方法？

Edit2：用单独的透明 .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

由于您使用的是纯色背景色，您可以使用rgba 仅更改背景/边框的不透明度，而不会影响里面的内容。在您的示例中：

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()

对于图像，您可以使用 :before 和 :after 完成淡化，并淡化这些元素的不透明度：

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