Question

我想做一个简单的效果：

Div有一张背景为RGBA(255,255,255,0.5)背景的图片和文字。

悬停时，我希望在一次平滑过渡中使图像降低不透明度+文本消失的背景。

这一切都按预期工作，除非我尝试同时给出img和文本转换，而不是两个转换过程，图像通过转换降低其不透明度，但文本的背景不会。

为什么会发生这种情况？

UPDATE ：在Firefox上测试它，它运行正常。问题似乎是Windows上的Chrome（我使用的是最新版本），有没有其他人使用chrome / windows让我知道他们是否也看到了问题？

您可以看到demo here

Answer 1

使用span::after执行背景操作并使span背景保持透明。然后，您可以使用opacity代替rgba()。

演示：

CSS：

span{
    display:block;
    position:absolute;
    bottom:10px; 
    left:0; 
    padding:5px 10px; 
    font-size:10px;
    z-index: 1;
   }
span::after {
    background-color: white;
    content: '\A0';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    z-index: -1;
}
img, span, span::after {
    -webkit-transition: all .8s; 
    -moz-transition: all 0.8s; 
    -ms-transition: all 0.8s; 
    -o-transition: all 0.8s; 
    transition: all .8s; 
}
div {
    position:relative;
}
div:hover span::after {
    opacity:0; 
}
div:hover span {
    bottom:50px;
}
div:hover img {
    opacity: 0.35;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35);
    transform: scale(1.1, 1.1);
}

HTML：

<div><img src="http://placekitten.com/200/300" />
<span>Text Text Text</span>
</div>

这是另一个使用<div>代替::after的演示，正如您提到的那样有问题。

演示：

Answer 2

使用转换时，您必须定义开头和结尾。而不是后台无，请使用rgba（255,255,255,0）;所以开头和结尾都讲同一种语言。

CSS不理解像“background-color”这样的东西 - ＆gt;转型的“无”。此外，在这种情况下，您可能希望使用透明，因为“none”不是有效的CSS背景颜色。

我也认为你的CSS部分可能不兼容。如果删除比例尺，事情就会发生。游民。看到我的第二个小提琴，似乎工作，所以也许你只需要写一些更清洁的代码或什么？我使用的是数字而不是图像，但它的行为应该相同。希望这有帮助！

以下是your updated fiddle，然后是My fiddle.

<figure>

    <figcaption>without scale</figcaption>

</figure>

<figure class="scale">

    <figcaption>with scale</figcaption>

</figure>

-

 .trans, figure, figcaption {

  -webkit-transition: all .5s linear; 
     -moz-transition: all .5s linear; 
       -o-transition: all .5s linear; 
          transition: all .5s linear; 
}

figure {
    position: relative;
    width: 20em;
    height: 10em;
    background-color: rgba(255,0,104,1);
}

figure:hover {
    background-color: rgba(255,0,104,.2);
}

figcaption {
    position: absolute;
    width: 100%;
    bottom: 0; left: 0;
    padding: 2em 1em;
    background-color: rgba(255,255,255,.8);
}

figure:hover figcaption {
    bottom: 20px;
    background-color: rgba(255,255,255,.0);
}

.scale:hover {
       -webkit-transform: scale(1.1, 1.1);
       -moz-transform: scale(1.1, 1.1);
       -ms-transform: scale(1.1, 1.1);
       -o-transform: scale(1.1, 1.1);
       transform: scale(1.1, 1.1);
   }

为什么css3过渡不能同时做多个事情？小提琴

2 个答案:

CSS：

HTML：