使用 CSS 改变背景答案

【问题标题】：Change of background using CSS使用 CSS 改变背景
【发布时间】：2015-08-20 06:29:04
【问题描述】：

是否可以通过单击按钮仅使用 CSS 来更改页面的背景图像？我有 6 个按钮，我想在单击按钮时更改整个页面的背景图像。

只有css可以吗？如果是，那么如何？

【问题讨论】：

点击更改css类
您需要使用一些 Javascript。我会通过单击该按钮来更改我的<body> 标签的类。然后 CSS 会根据该类处理背景（以及您可能想要更改的所有其他与样式相关的内容）。
你需要为点击事件添加一些javascript，如果你只想改变图片的css那么你可以使用悬停效果。
CSS 决定页面的外观，而不是它的行为方式。如果没有任何脚本，则无法通过单击按钮来更改页面背景。
简单地说。答案 = 否

标签： php html css wordpress

【解决方案1】：

仅使用 CSS 和 HTML 就很容易做到这一点。

http://codepen.io/anon/pen/KpmPYO

input[name="bg-change-control"] {
  display: none;
}
body {
  margin: 0;
}
#page {
  background: url(http://lorempixel.com/1000/700) no-repeat 0 0;
  background-size: cover;
  height: 100vh;
}

label {
  -moz-appearance: button;
  -webkit-appearance: button;
}

#cb1:checked ~ #page{
  background-image: url(http://lorempixel.com/800/600);
}
#cb2:checked ~ #page{
  background-image: url(http://lorempixel.com/640/480);
}
#cb3:checked ~ #page{
  background-image: url(http://lorempixel.com/1024/768);
}

<input type="radio" name="bg-change-control" id="cb1" />
<input type="radio" name="bg-change-control" id="cb2" />
<input type="radio" name="bg-change-control" id="cb3" />

<div id="page">
  <label for="cb1">BG 1</label>
  <label for="cb2">BG 2</label>
  <label for="cb3">BG 3</label>
</div>

【讨论】：

这是一个完美的答案。但是我建议进行一些修改，例如postion:fixed; overflow:scroll;，这将有助于在内容溢出时不显示原始背景；

【解决方案2】：

这可以通过纯 CSS 和 HTML 实现。无需使用 Javascript 和 Jquery。

试试这个

HTML：

<input type="button" value="Click" class="click">
<div class="background1"></div>

CSS：

.background1 {
    background: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg") no-repeat; width:500px; height:500px
}
.click:focus ~ .background1 {
    background: url("http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg") no-repeat; width:500px; height:500px
}

希望它能满足您的要求。

【讨论】：

【解决方案3】：

那很好，但没有。

不过，您不需要那么难的功能。只需将背景更改附加到按钮的其余功能即可。在这种情况下，我建议您只需将背景图像添加为内联的 CSS 与您的 js，因为 6 类图像很容易出错。

【讨论】：

OP：请取消选中此答案，因为这是完全错误的。 @Vlad Pintea：由于您的答案是错误的，因此如果您可以删除它会对所有人都有帮助。