使用选择标签更改 html 页面背景答案

【问题标题】：Change html page background with select tag使用选择标签更改 html 页面背景
【发布时间】：2018-02-28 14:06:22
【问题描述】：

从下拉列表中选择时，我试图更改 html 页面背景图像（url 图像），但我不知道如何.. 以下是我的代码：

<select id="styledSelect" onchange="doit()">
<option value="0" /> Select...
<option value="1" /> 1
<option value="2" /> 2
<option value="3" /> 3
<option value="4" /> 4
<option value="5" /> 5
<option value="6" /> 6
<option value="7" /> 7
<option value="8" /> 8
<option value="9" /> 9
</select>

<script>

function between(x, min, max) {
return x >= min && x <= max;
}

function doit() {

var s = document.getElementById('styledSelect');

if (between(s.value, 1, 3)) {
[http image1]
}
else if (between(s.value, 4, 6)) {
[http image2]
}
else if (between(s.value, 7, 9)) {
[http image3]
}
}
</script>

【问题讨论】：

标签： html image select background dropdown

【解决方案1】：

你快到了。只需查看下面的代码，您就会找到正确的方法。（只选择1、2或3，其他图片我没有添加，需要的时候可以添加）

function between(x, min, max) {
  return x >= min && x <= max;
}

function doit() {

  var s = document.getElementById('styledSelect');
  
  if (between(s.value, 1, 3)) {
    document.body.style.backgroundImage = "url('https://i2.wp.com/ape-al.org.br/wp-content/uploads/2016/07/parallax-bg.jpg?fit=1600%2C730')";
  }
  else if (between(s.value, 4, 6)) {
    document.body.style.backgroundImage = "url(LINK/PATH TO YOUR IMAGE);";
  }
  else if (between(s.value, 7, 9)) {
    document.body.style.backgroundImage = "url(LINK/PATH TO YOUR IMAGE);";
  }
}

<body>
  <select id="styledSelect" onchange="doit()">
  <option value="0" /> Select...
  <option value="1" /> 1
  <option value="2" /> 2
  <option value="3" /> 3
  <option value="4" /> 4
  <option value="5" /> 5
  <option value="6" /> 6
  <option value="7" /> 7
  <option value="8" /> 8
  <option value="9" /> 9
  </select>
</body>

【讨论】：

body { -webkit-background-size: 封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； }
是的，你可以这样做，你也可以用document.body.style.backgroundSize = ...动态添加它看看这里：w3schools.com/jsref/dom_obj_style.asp我也建议使用jQuery，最好在运行时设置东西/动态
另外如何在后台命令中插入“no-repeat”？
你可以这样做backgroundRepeat="repeat-x"或直接在图片后：url("path.png") no-repeat right top;