2

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

Div 有一个带有RGBA(255,255,255,0.5)背景的图像和文本。

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

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

任何想法为什么会发生这种情况？

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

你可以在这里看到一个演示

4

2 回答 2

1

用于span::after做背景并使span背景保持透明。然后你可以使用opacity而不是rgba().

演示： jsFiddle

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>这是另一个使用 a而不是 的演示::after，正如您提到的那样。

演示： jsFiddle

于 2013-02-28T21:02:50.077 回答
0

使用过渡时，您必须定义开始和结束。代替背景无，使用 rgba(255,255,255,0); 所以开头和结尾说的是同一种语言。

CSS 不理解诸如“背景颜色”->“无”之类的过渡。此外，在这种情况下，您可能希望使用透明，因为“none”对于背景颜色来说不是有效的 CSS。

我还认为您的 CSS 的某些部分可能不兼容。如果你删除了规模的东西，事情就会按照他们应该的方式行事。真可惜。看看我的第二个小提琴，这似乎工作，所以也许你只需要写一些更干净的代码或什么？我使用了图形而不是图像，但它的作用应该相同。希望这可以帮助！

这是您更新的小提琴，然后是我的小提琴。

<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);
   }
于 2013-02-28T19:59:02.137 回答