Question

如何在网站上添加一些内容，允许用户从三种背景中进行选择？

我不知道这是否需要Javascript，CSS或HTML（我对网页设计相对较新）

（这是一个非常简单的问题，但我没有通过谷歌找到它）

Answer 1

试试这个方法。它非常简单，你想要的。这里我提供了一个下拉菜单，但您可以使用任何输入选择器。

<script type="text/javascript">
function switchBG(){
var img = document.getElementById("theSwitch").value;
var page = document.getElementById("pageBody");

if(img == 1){
    page.className = "bgOne";
} else if(img == 2){
    page.className = "bgTwo";
} else if(img == 3){
    page.className = "bgThree";
}
}
</script>

<style type="text/css">
.bgOne{
    background:url(1.png)
}
.bgTwo{
    background:url(2.png)
}
.bgThree{
    background:url(3.png)
}
</style>

<div id="pageBody" class="bgOne">
<select id="theSwitch" onchange="switchBG()">
  <option value="0">Choose Background</option>
  <option value="1">BG 1</option>
  <option value="2">BG 2</option>
  <option value="3">BG 3</option>
</select>
</div>

Answer 2

我认为这个问题过于宽泛，但无论如何我都会试一试：）

您可以使用此JavaScript将您网站的背景图片设置为3个（更多）中的一个，其中 selectedImage 是所选图片的数组索引：

var bgImages = ['image1.png', 'image2.jpg', 'http://example.com/image3.gif'];
var selectedImage = 0;

document.body.style.backgroundImage = "url('" + bgImages[selectedImage % bgImages.length] + "')";

如果您想保存自己的用户选择，可以使用cookies或新的HTML5 Web Storage API。

我想你想在页面加载时更新背景图片。要做到这一点，你可以把你的JavaScript放入。你也可以把它放进去，但你必须等待＆＃39; DOMContentLoaded＆＃39;因为document.body在此之前不可用。

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        //code goes here
    });
</script>

jquery解决方案就是

<script>
  $(document).ready(function(){
    //you code goes here
  });
</script>

在我看来，最好的办法是在服务器端完成所有这些工作（例如使用php）但是对于你的标签，看起来你并不是在寻找类似的解决方案。

我建议你看一下这个答案中的一些链接，并尝试自己解决。请不要指望stackoverflow用户为您编写所有代码。尝试分解您的问题并提出更具体的问题，例如＆＃39;如何使用javascript更改背景图片＆＃39;而且我相信你会在这里找到大量的答案......

可选择的网站背景

2 个答案: