css - CSS3トランジションを使用して、背景画像をrgba色でオーバーレイします

Question

今日の初めに、rgba background-color を使用して background-image をオーバーレイするように依頼しました。私の目標は、背景画像を含む div を作成することです。誰かが div をホバーすると、背景画像が rgba 色でオーバーレイされます。回答では、次のソリューションが提供:afterされました。

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

今は同じにしたいのですが、CSS トランジションを使用します。背景色をフェードインさせたいのですがtransition: all 1s;、#the-divCSS に追加しようとしましたが、うまくいきませんでした。と にも追加しようとしました#the-div:hoverが#the-div:after、それもうまくいきませんでした。

背景画像のあるdivにフェードインオーバーレイを追加する純粋なCSSの方法はありますか?

Answer 1