仅在加载某个 CSS 文件时才加载某些图像[关闭]答案

【问题标题】：Load certain images only when a certain CSS file is loaded [closed]仅在加载某个 CSS 文件时才加载某些图像[关闭]
【发布时间】：2013-04-06 15:09:30
【问题描述】：

我目前有 1 个 html 文件和 3 个 CSS 文件。每个 CSS 文件代表 3 个不同的主题，基本上代表 3 种不同的颜色，即 1 种红色、1 种蓝色和 1 种黄色。

我在页面刷新时随机加载这 3 个 CSS 文件中的一个，因此每次刷新页面时，您都会获得不同颜色的页面主题。我正在使用 PHP 执行此操作，并且工作正常。我的代码如下：

<link href="css/colours/<?php echo mt_rand(1, 3); ?>.css" rel="stylesheet" type="text/css"/>

我的问题是如何将内联图像与正确的样式表配对，以便在您点击刷新时用户看到该主题的正确图像？

每个 CSS 文件将使用 4 个不同的图像，并且它们必须与正确的颜色相关，因此如下所示：

编辑我不能使用背景图片，因为它是一个响应式网站，而且这些图片在屏幕上完美居中。

【问题讨论】：

也许把这些图片放在你的样式表中？如果您只加载红色样式表，并且它只包含图像 1 2 3 和 4，那么您实际上只加载了这些图像。我真的不明白问题是什么......
它是一个响应式网站，我需要某些元素在屏幕上完美居中。我不能让展示的图像被切断
我看不到将图像居中与在几个 css 样式表中放置不同链接之间的联系。 Praveen 的回答可能对您有所帮助。关闭投票这个问题。
将divs 中的背景图片与height 和width 结合使用。此外，如果您使用 body 上的类切换主题，例如<body class="red-theme">，那么您可以将所有样式保存在一个文件中。在 CSS 文件上放置一个Expires 标头，您将不必一直担心加载不同的 CSS 文件。图像可以放置一个（或多个）精灵，以便它们只加载一次。
背景可以缩放：tinker.io/84c6f

【解决方案1】：

将您的图片放在三个文件夹中，例如 images-1、images-2、images-3。现在您将随机数存储在一个变量中：

<?php
   $theme = mt_rand(1, 3);
?>

加载样式表时，使用变量：

<link href="css/colours/<?php echo $theme; ?>.css" rel="stylesheet" type="text/css"/>

当您加载图片时：

<img src="images-<?php echo $theme; ?>/image1.jpg" /> <!-- Loads image 1 in of the current theme -->

【讨论】：

【解决方案2】：

假设您在背景中拥有所有图像。因此，实际上，您可以通过这种方式制定规则，例如在red.css 中，您有：

.header {background: url("image1.jpg");}

在blue.css，你有：

.header {background: url("image5.jpg");}

在yellow.css，你有：

.header {background: url("image9.jpg");}

这样，只有在加载样式表时，才会加载图片。

或者，如果你将它们放在 HTML 中，你不会在视觉上加载它们，但你会在页面中加载并保持它对视图隐藏。这样说，在red.css 你有：

.header {display: none;}
.header.red {display: block;}

在blue.css，你有：

.header {display: none;}
.header.blue {display: block;}

在yellow.css，你有：

.header {display: none;}
.header.yellow {display: block;}

在你的 HTML 中，你有这个：

<img src="image1.jpg" class="header red" />
<img src="image5.jpg" class="header blue" />
<img src="image9.jpg" class="header yellow" />

【讨论】：