performance - background-size：覆盖性能问题

Question

我在使用大量带有background-size: cover. 我已经添加了transform: translate3d(0,0,0)它确实有一点帮助，但没有我想要的那么多。如果可能的话，我真的在寻找一个纯 CSS 修复。

Answer 1

jsFiddle Demo

background-size:cover全面表现糟糕。我之前发现使用它有很多问题，并放弃了它以支持这种方法。

使用 div 内的图像，将 div 调整为您希望使用的尺寸。将图像大小设置为：

left:0;
right:0;
top:0;
bottom:0;
position:relative;
width:100%;
height:100%;

并直接将正在加载的图片的 url 分配给src="url".

即使通过这个艰苦的测试，你也可以看到它做得很好（即使在 safari 中测试 - jQuery 用于演示中的简洁性）

var place = "http://placehold.it/";
var all = $("<div>");
for( var w = 5; w < 100; w++ ){
 for( var h = 5; h < 100; h++ ){
  var nwln = $('<div>');
  var img = $('<img class="sq">');
  nwln.width(w*2);
  nwln.height(h*2);
  var url = place + w + "x" + h;
  img[0].src = url;
  nwln.append(img);
  all.append(nwln);
 }
}
$("#grid").append(all);