google-chrome - 使用背景大小 : cover 的 Chrome 性能不佳

标签 google-chrome background-image css cover

我需要在我的网站中覆盖背景,并且我总是在鼠标悬停或任何其他操作时看到lags/slugs。你知道如何解决这个问题吗? 我这里有一个工作示例(如果我还没有更新代码):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%;
}

最佳答案

似乎 webkit 不会缓存调整大小的图像并每次都渲染它,从而导致延迟。

当涉及到 chrome 中的背景大小时,你运气不好。

我见过有人用 Javascript/jQuery 来做这件事。参见 http://srobbin.com/jquery-plugins/jquery-backstretch/

关于google-chrome - 使用背景大小 : cover 的 Chrome 性能不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7869086/

相关文章:

javascript - jQuery 打开文件对话框在 Chrome 和 IE 中多次打开

javascript - 捕获按键,定向到 Chrome 中的特定元素

html - CSS - UL 背景不工作

html - html 或 css 中不规则形状的框架/边框

html - 如何使用导航订购列表?

google-chrome - 如何降级到 Chrome 42.0.2311.90?

Android 应用 https 深度链接和 Chrome 浏览器

css - Bootstrap - 根据设备屏幕尺寸调整 Jumbotron 图像背景覆盖范围

css - 背景图像在 IE8 及以下版本中居中/固定的问题

html - 如何为其中一个 html div 中已有样式的标签定义新的 css 样式?