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

我是一个完全的新手，当涉及到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>

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

编辑：感谢您提供rgba（）解决方案，这解决了问题。我有另一个相同的问题，除了有一个背景图像，而不是一个坚实的背景色。有类似的解决方法吗

Edit2：使用单独的transparent.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;
}

---

由于您使用的是纯色背景色，因此可以使用

rgba

仅更改背景/边框的不透明度，而不影响内部内容。在您的示例中：

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

对于图像，您可以使用

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

---

只需将背景颜色更改为较浅的灰色，不必担心不透明度。因此，为了澄清问题，您想要一个div，其背景图像在悬停时会淡出，但其内部的文本保持完全不透明度？这将是有问题的，因为不透明度是相对于父对象的。如果父div的不透明度为0.5，并且将子元素的不透明度设置为1，则实际上最终的结果是1*0.5=0.5。换句话说，孩子不能比父母更不透明。作为一种解决方法，您可以使用img元素而不是CSS，或者稍微聪明一点：太好了，谢谢！事实上，我有另一个相同问题的案例，但是该部分的背景将是一个图像。对于我使用图像作为背景的情况，是否有类似的修复方法？@user2456290在这种情况下，您可以修改图像文件，使图像本身包含必要的透明度。我自己以前也用过这种技术。这个链接还包括一个我以前没有使用过的技巧：为了完成信息，还有一个

hsla（）

函数来完成。看起来rgba（）与IE8&7（WinXP）不兼容：所以我去掉了一点css，它改变了我图像的不透明度，并用透明的.png替换了悬停图像背景url。由于某种原因，这打破了我的淡入淡出。有什么想法吗？我将把css放在编辑的原始帖子中。

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