Làm cách nào để mờ dần trong ảnh nền bằng CSS3 Animation

Question

Tôi đang tạo một menu cho mỗi mục có văn bản như item1, item2 và vv trong việc di chuyển các thay đổi màu nền, văn bản trở nên trong suốt và hình nền thay thế. Tôi sử dụng mã này để dễ dàng trong và ngoài phong cách. nhưng nó chỉ hoạt động với màu nền chứ không phải hình ảnh.

#nav li:hover { 
    color:transparent !important; 
    text-shadow: none; 
    background-color: rgba(255, 0, 0, .5); 

    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    -ms-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
} 

Đây là phiên bản trực tuyến: http://jsfiddle.net/q4uHz/

Answer 1

hình ảnh nền không thể được hoạt hình; sẽ không có thuật toán cho điều đó. Một giải pháp đơn giản là bao gồm <img> với biểu tượng trong HTML của bạn thay vì bằng opacity: 0 và tạo hoạt ảnh đó. Cái gì đó như.

<li id="home"> 
<img src="http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png"> 
<a href="#home">Home</a></li> 

#nav li { 
    position: relative; 
} 
#nav li img { 
    opacity: 0; 
    position: absolute; 
    transition: all 1s ease-in; 
    top: 0; 
    left: 0; 
} 
#nav li:hover img { 
    opacity: 1; 
} 

http://jsfiddle.net/ExplosionPIlls/q4uHz/1/