Poor performance of Chrome using background-size: cover

问题

I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue? I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com

ul#posters li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    height: 170px;
    position: relative;
    width: 25%;
}

回答1:

It appears webkit doesn't cache the resized image and renders it every time, causing the lag.

You're out of luck when it comes to background-size in chrome.

I've seen people do it with Javascript / jQuery. See http://srobbin.com/jquery-plugins/jquery-backstretch/

来源：https://stackoverflow.com/questions/7869086/poor-performance-of-chrome-using-background-size-cover