Question

我有5个不同的徽标图像，大小相同，只是颜色不同。我希望每当有人访问网站并且页面重新加载时图像就会旋转，这样他们就会看到不同的颜色。

有没有办法用CSS做到这一点？

谢谢！

Answer 1

嗯，我有一个简单的想法可以做到这一点。基本上，生成一个随机数，然后根据数字显示一个图像。因此，每次页面加载时，都会有一个新的RANDOM图像。

以下是一段代码示例：

<?php
$imagenum = rand(1,10);
if (($imagenum = 1) or ($imagenum = 2)) {
    //Display Image #1 Here
    echo "<img src=''>";
}
elseif (($imagenum = 3) or ($imagenum = 4)) {
    //Display Image #2 Here
    echo "<img src=''>";
}
elseif (($imagenum = 5) or ($imagenum = 6)) {
    //Display Image #3 Here
    echo "<img src=''>";
}
elseif (($imagenum = 7) or ($imagenum = 8)) {
    //Display Image #4 Here
    echo "<img src=''>";
}
else {
    //Display Image #5 Here
    echo "<img src=''>";
}

这样，始终随机使用哪个图像。

修改

你问是否有办法在CSS中执行此操作。答案是否定的，CSS无法做到这一点。原因是CSS不是动态，它也是你告诉它的，它无法思考（按照说）。

Answer 2

一点Javascript怎么样？

function updateImgSrc() {
  var img = document.getElementById('my-logo');
  var rand = Math.round(Math.random()*5) + 1;
  img.src = img.src.slice(-5, img.src.length) + rand + ".jpg";

}

$(document).ready(function(){
  updateImgSrc();
});

...这意味着如果您的图片的ID为#my-logo，则在每次加载页面时，它会更新图片路径以包含1到5之间的不同（随机）数字，最后的文件名。如果您正确命名您的徽标（logo-variation-1.jpg，logo-variation-2.jpg等），您将在每个页面加载时获得不同的图像。

如果您的徽标中包含css背景图片，那么您可以轻松地将javascript添加到元素中，然后从样式表中提取相应的图片：

function updateImgClass() {
  var imgElement = $('my-logo');
  var rand = Math.round(Math.random()*5) + 1;
  imgElement.addClass('logo-' + rand);

}

$(document).ready(function(){
  updateImgClass();
});

的CSS：

#my-logo.logo-1 {
  background-image: url('path-to/image-here.jpg')
}

#my-logo.logo-2 {
  background-image: url('path-to/image-here2.jpg')
}

.. et cetera

使用CSS在Wordpress中为每个刷新/页面添加新徽标图像

2 个答案: