为什么可以'；css3转换是否同时做多件事？胡闹

我尝试做一个简单的效果：

Div有一个带有

RGBA（255255255,0.5）

背景的图像和文本

在悬停状态下，我想在一次平滑过渡中使图像的透明度降低+文本背景消失

这一切都像预期的那样工作，除了当我尝试给img和文本都设置一个过渡，而不是两个东西都进行过渡时，图像通过过渡降低其不透明度，但是文本的背景没有

知道为什么会这样吗

更新：在firefox上测试，效果良好。问题似乎是在Windows上使用Chrome（我使用的是最新版本），其他使用Chrome/Windows的人如果也看到了问题，是否可以告诉我

---

您可以看到一个

当使用转换时，您必须定义开始和结束。使用rgba（255255,0）代替背景无；因此，开头和结尾讲的是同一种语言

CSS不理解像“背景色”->“无”这样的转换。此外，在这种情况下，您可能希望使用透明，因为“none”对于背景色不是有效的CSS

我还认为，可能你的CSS的某些部分不兼容。如果你删除了“缩放”的内容，事情就会按其应有的方式运行。真倒霉看我的第二把小提琴，它似乎在工作，所以也许你只需要写一些更干净的代码或什么？我用数字代替图像，但它的作用应该是一样的。希望这有帮助

这是，然后

---

使用

span:：after

制作背景，并使

span

背景保持透明。然后可以使用

opacity

而不是

rgba（）

演示：

CSS:

span{
显示：块；
位置：绝对位置；
底部：10px；
左：0；
填充物：5px10px；
字体大小：10px；
z指数：1；
}
span：：之后{
背景色：白色；
内容：'\A0'；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
不透明度：.5；
z指数：-1；
}
img，span，span：：之后{
-webkit转换：所有.8s；
-moz转换：所有0.8秒；
-ms转换：所有0.8s；
-o-过渡：均为0.8s；
过渡期：全部8秒；
}
div{
位置：相对位置；
}
div:悬停范围：：之后{
不透明度：0；
}
分区：悬停范围{
底部：50px；
}
分区：悬停图像{
不透明度：0.35；
-webkit转换：规模（1.1,1.1）；
-moz变换：比例（1.1,1.1）；
-ms变换：比例（1.1,1.1）；
-o变换：比例（1.1,1.1）；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=35）；
变换：比例（1.1,1.1）；
}

HTML:

文本文本文本

下面是另一个演示，它使用了

而不是

：：after

，正如您提到的，它有问题

---

演示：

这可能是浏览器问题吗？Chrome 25在Mac上似乎运行良好。真的吗？背景是否在图像降低不透明度的同时平滑消失？我正在使用最新的Chrome for Windows，非常奇怪……在Windows上的Firefox 19中对我有效。我刚刚在Firefox上测试了它，它确实工作得很好。。。。。什么…@Jeremy T:它实际上从

rgba

转换到

transparent

-

none

指的是图像，因此始终保持不变，而且由于他使用速记，

transparent

在使用

背景：none

时被隐式设置。感谢Derek的帮助，但不幸的是，问题依然存在。还有人说，移除“底部”移动对他也有好处，所以我认为windows上的chrome肯定有一些限制！它甚至不仅仅是RGBA，我测试了一个透明的png作为背景，它是一样的。但你的小提琴确实很好用。。。。。我太糊涂了！我在你的小提琴上添加了一个图像+不透明度转换，它再次打破了背景转换（）。。这太糟糕了！好啊所以问题似乎就在于不透明。我讨厌img。如果你把不透明度放在div上，而不是img上，那么它似乎可以工作。因此，请在图像周围使用.wrapper进行检查。我不惜一切代价避免不透明，总的来说，这总是一件痛苦的事。而且很紧张。根据您的用例。。。我经常在我所有的图像上加上一个“封面”div，然后在你的例子中，你可以从rgba（255255,0）中淡出；->rgba（255255.5,5）；假设你有一个白色的背景等，但它总是一个不同的解决方案。不过，这要稳定得多。不透明性是一个跨浏览器的噩梦，它看起来像是神经质的jQuery。这是一个实际操作：我的意思是，它是一个额外的div，但它可以给你一些很酷的添加控制，如果你用php填充列表，你真的只需要添加一次div标记…这确实有效，问题是我希望字母仍然显示，而且不透明度：0也隐藏了字母（这就是为什么我尝试使用RGBA来完成这一切），但是感谢您的尝试@ThinkingStiff我知道这是离题的，但您是如何获得到JSFIDLE的图像链接的？我以前从未见过这种情况。@user1202292我想出了一种方法，在保持字母显示的同时做到这一点。我更新了我的答案和演示。@jdwire滚动到HTML部分的底部。@ThinkingStiff我在谈论你问题中的JSFIDLE徽标。有没有一种特殊的方法可以做到这一点，或者你只是添加了一个图像，并使其成为一个链接？从小提琴上回到SO的链接也很酷。

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