css - 大背景图片的css放在哪里？

Question

我正在创建一个网站，每个网站的顶部都有一个大的预告图片(作为背景图片)。

现在的问题是，将背景图像的样式表放在哪里，以加快加载时间。

第一个选项是为每个站点使用嵌入式样式表:

HTML 站点 #1

<div id="teaserimage" style="background-image: url("/path/to/img1.jpg")"></div>

HTML 网站 #2

<div id="teaserimage" style="background-image: url("/path/to/img2.jpg")"></div>

HTML 站点#3

<div id="teaserimage" style="background-image: url("/path/to/img3.jpg")"></div>

另一种选择是使用一个 .css 文件并将所有图像放在那里。

HTML 站点 #1

<div id="teaserimage" class="site1"></div>

HTML 网站#2

<div id="teaserimage" class="site2"></div>

HTML 站点 #3

<div id="teaserimage" class="site3"></div>

CSS:

#teaserimage.site1 { background-image: url("/path/to/img1.jpg")" }
#teaserimage.site2 { background-image: url("/path/to/img2.jpg")" }
#teaserimage.site3 { background-image: url("/path/to/img3.jpg")" }

什么会更快？第二个选项更容易管理，但这个选项可能更慢，因为所有图像都已加载 - 甚至是其他站点的图像？在我当前的 Firefox 版本中，只加载了所需的图像，但我可以这样认为吗？

Answer 1

1. 最好使用外部 CSS。
2. 如果类标准不匹配，则不会加载图像，因此如果您的 html 中不存在该元素，则不会应用 css 规则，也不会加载图像