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

内联样式仅应用于您指定的HTML元素。

与内部样式表一样，这会产生维护问题。如果要更改某些内容，则必须找到使用该特定内联样式的每个实例。

我什么时候可以使用内联样式？与内部样式表一样，当您有1或2个需要特殊样式的特定点时。同样，这可以在外部样式表中完成，以便于维护。你在第一个选项中使用内联样式表，在第二个选项中使用外部样式表，第二个是最好的，因为

外部样式表：

通过减少网页中包含的编码来缩小网页的大小。使维护网站和进行更改变得更加容易。如果未按计划应用样式，则更容易解决问题。您只需要从一个位置查看您的样式及其编写顺序。

Answer 2

使用外部css是一种更好的做法。
如果类标准不匹配，则不会加载图像，因此如果html上不存在该元素，则css规则将不适用且图像将无法加载

在哪里放css大背景图片？

2 个答案: