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

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

1 个答案: