为数组中的图像指定特定的 bg 颜色(仅限 Javascript）

Assign a specific bg color to an image in an array (Javascript Only)

本文关键字：颜色 仅限 Javascript bg 数组 图像      更新时间：2023-09-26

我正在使用脚本生成随机标题图像，但我希望能够在加载时在每个标题后面分配特定的背景颜色。我想知道是否可以仅使用Javascript来实现这一点（不幸的是，无法使用任何其他语言。

这是我正在使用的随机图像脚本。对于 6 张图像中的每一张，我想分配一个特定的背景颜色。我已经尝试了一些方法，但似乎没有任何效果。有什么建议吗？

<script language="JavaScript">
function random_imglink(){
var myimages=new Array()
myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" class="header">')
}
random_imglink()
</script>

像这样的东西？我认为虽然你需要一个容器div 来包裹你的图像作为背景颜色。（我假设这些是透明的 gif...

这是一个小提琴：http://jsfiddle.net/f4drr6kL/3/

var myimages = new Array();
function random_imglink(){
    myimages[0]= { 
        img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
        color : "red" 
    }; 
    myimages[1]= { 
         img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
         color : "blue" 
    };
    myimages[2]= { 
         img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
         color : "green" 
    };
    myimages[3]= { 
          img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
          color : "yellow" 
     };
    myimages[4]= { 
         img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
         color : "orange" 
    };
    myimages[5]= { 
        img   : "http://info.eps.surrey.ac.uk/logos/transbugs.gif", 
        color : "cyan" 
    };
    var ry = Math.floor(Math.random()*myimages.length);
    document.getElementById("a_div").innerHTML = '<img src="' + myimages[ry].img + '" class="header" style="background-color:' + myimages[ry].color + ';">';
}
random_imglink();
相关文章：