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个不同的图像，它们必须与正确的颜色相关联，所以像这样：

修改我不能使用背景图像，因为它是一个响应式网站，这些图像完全集中在屏幕上。

Answer 1

假设您拥有背景中的所有图像。所以，实际上，你可以通过这种方式获得规则，比如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" />

Answer 2

将图像放在三个文件夹中，如图像-1，图像-2，图像-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 -->