我有代码在javascript和CSS中刷新图像随机化以格式化图像,但我不知道如何将两者结合起来

时间:2017-08-06 20:22:14

标签: javascript css

对不起如果标题没有意义,我对此非常陌生,所以这里是我所谈论的内容:{{3 }}

我希望标题框下方显示的图像显示在标题框中。

我只是把那些图像作为一个例子。



CREATE TRIGGER trigger_expiration_date 
BEFORE INSERT ON contracts 
FOR EACH ROW
    SET new.expiration_date = (
        SELECT  date_add(new.date_of_purchase, INTERVAL nr_months MONTH)
        FROM    contract_types 
        WHERE   new.id_contract_type = id_contract_type);

var images = [
  "https://i.redd.it/1ev9elr85xcz.jpg",
  "https://i.redd.it/g6kc3upsvqdz.jpg",
  "https://i.redd.it/koucki3aygdz.jpg"
];

function randImg() {
  var size = images.length
  var x = Math.floor(size * Math.random())
  document.getElementById('image').src = images[x];
}

randImg();

h1 {
  color: silver;
  text-align: center;
  max-width: 100%;
  vertical-align: middle;
  line-height: 85px;
  height: 100px;
  border: solid;
  border-color: silver;
  border-radius: 25px;
  border-width: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://i.redd.it/pvqzvajftpdz.jpg);
  background-size: cover;
  box-sizing: border-box;
}




1 个答案:

答案 0 :(得分:0)

你是说这个吗?



var images = [
  "https://i.redd.it/1ev9elr85xcz.jpg",
  "https://i.redd.it/g6kc3upsvqdz.jpg",
  "https://i.redd.it/koucki3aygdz.jpg"
];

function randImg() {
  var size = images.length
  var x = Math.floor(size * Math.random())
  document.querySelector('h1').style.backgroundImage='url('+images[x]+')';
}

randImg();

h1 {
  color: silver;
  text-align: center;
  max-width: 100%;
  vertical-align: middle;
  line-height: 85px;
  height: 100px;
  border: solid;
  border-color: silver;
  border-radius: 25px;
  border-width: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://i.redd.it/pvqzvajftpdz.jpg);
  background-size: cover;
  box-sizing: border-box;
}

<div>
  <h1> Title.
    <img id="image" />
  </h1>
</div>
&#13;
&#13;
&#13;