Transition CSS entre l'image d'arrière-plan et la couleur d'arrière-plan

Question

J'essaie d'effectuer une transition de base sur un panneau avec une image d'arrière-plan. Je veux que ça passe à la couleur de fond en stationnaire. J'ai essayé d'utiliser différentes transitions qui ne fonctionnent pas. J'ai essayé (ce que je pensais travailler):

transition:background-image 0.2s ease-in-out; 

.panel { 
 
    width:200px; 
 
    height:200px; 
 
    background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center/cover; 
 
    transition:background-image 0.2s ease-in-out; 
 
} 
 
.panel:hover { 
 
    background:#000; 
 
    transition:background-image 0.2s ease-in-out; 
 
}

<div class="panel"></div>

Answer 1

Vous pouvez utiliser ce code:

Demo est ici: https://output.jsbin.com/yadiwoviwe

.panel { 
    position: relative; 
    background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center/cover; 
    width:200px; 
    height:200px; 
    transition: background-color 0.2s ease-in-out; 
} 
.panel:hover { 
    background-color: rgba(0,0,0,.5); 
} 
.panel:before { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    background-color: inherit; 
    content: ' '; 
} 

Answer 2

Malheureusement, vous ne pouvez pas faire cela dans ce w ay.

La raison est que vous essayez d'animer la propriété background-image - une propriété qui n'est pas animable.

Au lieu de cela, vous pouvez utiliser un petit truc cool qui utilise un pseudo-élément pour créer l'image d'arrière-plan à la place:

.panel { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    background: pink; 
 
} 
 

 
.panel::after { 
 
    content: ""; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    background: url(https://unsplash.it/200) center center no-repeat; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    will-change: opacity; 
 
    transition: opacity .1s ease-out; 
 
} 
 

 
.panel:hover::after { 
 
    opacity: 0.5; 
 
}

<div class="panel"></div>

Inspirée par this cool little article sur CSSTricks

Answer 3

Background- l'image n'est pas animable, vous ne pouvez pas ajouter de transition sur une propriété backgronund-image. Vous pouvez utiliser d'autres, solution de contournement pour résoudre ce comme @CGK réponse

background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center/cover; 

Answer 4

Vous pouvez manipuler l'opacité de l'image.

.panel { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #000; 
 
    position: relative; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.panel:after { 
 
    content: ""; 
 
    background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png'); 
 
    background-size: 200px 200px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    opacity: 1; 
 
    transition: opacity 0.2s ease-in-out; 
 
} 
 

 
.panel:hover:after { 
 
    opacity: 0; 
 
}

<div class="panel"><h1>Text</h1></div>