CSS如何更改容器而不是文本的不透明度? [英] CSS how to change opacity of container but not text?

问题描述

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

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:

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

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

感谢您提供rgba()解决方案，这解决了该问题.除了存在背景图像而不是纯背景颜色之外，我还有相同问题的另一种情况.有类似的解决方法吗?

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?

Edit2:将不透明度更改替换为单独的透明.png后出现淡入淡出的问题.

Issues with fade breaking after replacing opacity change with a separate 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 来仅更改背景/边框的不透明度，而不会影响里面的内容.在您的示例中:

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:

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

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

对于图像，您可以使用:before 和:after 进行淡入淡出，并淡化这些元素的不透明度:

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

这篇关于CSS如何更改容器而不是文本的不透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！