php - 仅在加载某个 CSS 文件时才加载某些图像

Question

我目前有 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 个不同的图像，它们必须与正确的颜色相关联，因此如下所示：

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

score 1 · Accepted Answer

假设您拥有背景中的所有图像。因此，实际上，您可以通过这种方式制定规则，例如在中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" />

score 1 · Accepted Answer

将您的图像放在三个文件夹中，例如 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 回答 2