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

I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:

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

And also

并且

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

This creates the hover that I want, but I can't keep the text opacity at 100%.

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

Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?

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

Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.

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

1 个解决方案

#1

Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:

由于您使用的是纯色背景，因此您可以使用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()

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

For images you can accomplish a fade using :before and :after and fading the opacity of those elements:

对于图像，您可以使用以下方式完成淡入淡出：之前和之后以及淡化这些元素的不透明度：

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

#1