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

w8f9ii69  于 2022-12-22  发布在  WordPress
关注(0)|答案(3)|浏览(140)

我有5个不同的标志图像,所有相同的大小,只是不同的颜色。我想图像旋转每次有人访问网站和网页重新加载,使他们看到不同的颜色。
有没有一种方法可以用CSS做到这一点?
谢谢!

68bkxrlz

68bkxrlz1#

好吧,我有一个简单的想法来做到这一点。基本上,生成一个随机数,然后根据该数字显示一个图像。因此,每次页面加载,将有一个新的随机图像。
下面是一段示例代码:

<?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之所以不是"动态的",它也会按你说的做,而且它不能思考(按说的)。

pengsaosao

pengsaosao2#

用一点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();
});

...这意味着如果你有一个标识为#my-logo的图像,在每次页面加载时,它会更新图像路径,在文件名的末尾包含一个不同的(随机)数字,在1到5之间。如果你给你的徽标命名正确(logo-variation-1.jpg,logo-variation-2.jpg等),你会在每次页面加载时得到一个不同的图像。
如果你的logo带有一个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
c0vxltue

c0vxltue3#

使用此代码,它会完美地工作.

<?php
$imagenum = rand(1,3);
if (($imagenum == 1)) {
    //Display Image #1 Here
    echo "<img src='https://i.imgur.com/image.png'>";
}
elseif (($imagenum == 2)) {
    //Display Image #2 Here
    echo "<img src='https://i.imgur.com/image.png'>";
}
elseif (($imagenum == 3)) {
    //Display Image #3 Here
    echo "<img src='https://i.imgur.com/image.png'>";
}
else {
    //Display Image Here
    echo "<img src='https://i.imgur.com/image.png'>";
}
?>

相关问题