对多个元素和浏览器性能使用相同的固定背景

Question

我使用与固定主体背景相同的高分辨率背景，并且我还将它与另外五个元素一起使用

body{
  background: url(highres.png) top center;
  background-attactment: fixed;
} 

box1{
  background: url(highres.png) top center;
  background-attactment: fixed;
}
box2{
  background: url(highres.png) top center;
  background-attactment: fixed;
}
.......
.......

我的问题是，如果我像上面一样多次使用 url(image.png)，浏览器是一次加载一次还是每个 url 加载一次？这会是导致浏览体验缓慢的原因吗？

Answer 1

这样它会读三遍：你可以这样做

body, #box1, #box2{
  background: url(highres.png) top center;
  background-attactment: fixed;
}

接下来你可以像平常一样为它们设置样式