-2

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

  • 红色样式表只能使用 image1.jpg、image2.jpg、image3.jpg 和
  • 蓝色_只能使用 image5.jpg、image6.jpg、image7.jpg 和 image8.jpg
  • 黄色样式表只能使用 image9.jpg、image10.jpg、image11.jpg 和 image12.jpg

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

4

2 回答 2

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" />
于 2013-04-14T13:11:15.340 回答
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 -->
于 2013-04-14T13:17:19.107 回答