Img通过Javascript添加显示0x0像素

时间:2018-01-22 17:20:36

标签: javascript image random background createelement

我正在尝试多次将相同的小图像添加到画布中。它正确地显示在Inspect Elements中,除了图像有0x0像素(自然是200x45或其他)。

以下是代码:

$(document).ready(function(){
var bgd1 = document.getElementById('background1'),
    bgd2 = document.getElementById('background2'),
    WIDTH,
    HEIGHT,
    nbgd1,
    nbgd2,
    bgd1imgs = [];

setBackgroundSize();
drawbgd1();

function setBackgroundSize() {
    WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;
    bgd1.setAttribute("width", WIDTH);
    bgd1.setAttribute("height", HEIGHT);
    bgd2.setAttribute("width", WIDTH);
    bgd2.setAttribute("height", HEIGHT);
}

window.addEventListener('resize', setBackgroundSize, false);


function addbgd1(){
    this.obj = document.createElement('img');
    this.obj.src = 'img/bgd1.png';
    this.obj.classList.add('bgd1img');
    this.obj.width = 100;
    this.obj.height = 22;
    this.obj.style.top = Math.floor((window.innerHeight * Math.random())) + 'px';
    this.obj.style.left = Math.floor((window.innerWidth * Math.random())) + 'px';
    bgd1.appendChild(this.obj);
}


function drawbgd1(){
    nbgd1 = Math.floor(WIDTH / 100);
    for(var i=0; i<nbgd1 ; i++){
        bgd1imgs.push(new addbgd1());
    }
}
});

完全迷失在这里。我尝试了几种CSS,但没有区别。

这是CSS:

#background1{
    position:fixed;
    z-index:-20;
    top:0;
    left:0;
    background-color:#000;   
    overflow:hidden;
}

.bgd1img{
    z-index:180;
    visibility:visible;
    display:block;
    height:22px;
    width:100px;
    position:fixed;
}

谢谢!

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。还是不知道老为什么不起作用(应该?)

这是我目前的解决方案:

  val FAs   = VecInit(Seq.fill(n)(Module(new FullAdder()).io))