web-dev-qa-db-ja.com

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

今日、私は rgba background-colorで背景画像をオーバーレイする を尋ねました。私の目標は、背景画像を含む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-div CSSに追加しようとしましたが、うまくいきませんでした。また、#the-div:hoverおよび#the-div:afterに追加しようとしましたが、それも機能しませんでした。

Background-imageを使用してdivにフェードインオーバーレイを追加する純粋なCSSの方法はありますか？

csscss3overlaybackground-imagecss-transitions
15
Keelan

@Anaテクニックもニースで​​あり、正常に動作しますが、 前の質問 への回答を少し変更し、そのコードにトランジションを追加できます。 http://jsfiddle.net/Pevara/N2U6B/2/

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}

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

私がやったのは、ホバー状態だけでなく、divのデフォルト状態で:after疑似要素を定義しましたが、完全に透明な背景と背景色の遷移を使用しています。 divの上にカーソルを置いて、擬似要素の背景色を透明度が低くなるように変更します。移行のおかげで、うまくフェードインします。

テクニックは基本的に@Anaが行ったものと同じですが、background-color: inherit;を使用しないため、おそらくもう少し直感的です。また、divが背景画像よりも大きくなる場合、ここで示すように、エッジに「二重の暗さ」はありません http://codepen.io/anon/pen/cjoHr vs http://jsfiddle.net/Pevara/N2U6B/3/

5
Pevara