2

私は単純な効果をやろうとしています:

RGBA(255,255,255,0.5)Div には、その上に背景のある画像とテキストがあります。

ホバーすると、画像の不透明度を下げ、テキストの背景をすべて1回のスムーズなトランジションで消したいと思います。

img と text の両方にトランジションを与えようとした場合を除いて、すべて期待どおりに機能し、両方がトランジションする代わりに、イメージはトランジションで不透明度を下げますが、テキストの背景はそうではありません。

なぜこれが起こっているのですか？

更新: Firefox でテストしたところ、正常に動作しました。問題は Windows 上の Chrome にあるようです (私は最新バージョンを使用しています)。chrome/windows を使用している他のユーザーにも問題があるかどうかを教えてもらえますか?

ここでデモを見ることができます

4

2 に答える 2

1

span::after背景を行い、span背景を透明のままにするために使用します。opacity次に、代わりに使用できますrgba()。

デモ： jsフィドル

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

デモ： jsフィドル

于 2013-02-28T21:02:50.077 に答える
0

トランジションを使用する場合、開始と終了を定義する必要があります。background none の代わりに、rgba(255,255,255,0); を使用します。つまり、最初と最後は同じ言語を話しているのです。

CSS は、トランジションの "background-color" -> "none" などを理解していません。また、その場合、「なし」は背景色の有効な CSS ではないため、透明を使用することをお勧めします。

また、CSS の一部に互換性がない可能性もあると思います。スケールのものを削除すると、物事は本来のように機能します。残念。私の 2 番目のフィドルを参照してください。これはうまくいっているようです。画像の代わりに図を使用しましたが、同じように動作するはずです。お役に立てれば！

これが更新された 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);
   }
于 2013-02-28T19:59:02.137 に答える