Question

我知道有很多关于更改背景颜色的问题，但它们似乎不适用于我的网站，我将gif作为初始背景。

开始我的html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> <!-- to load my bloody euro sign-->
        <title>
            CV - Rogier
        </title>
        <style>
            body{ background: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed; 
            background-size: cover;
            }

那么如何通过按下按钮将背景更改为纯色？（通过使用黑色图片链接或color:black，但我更喜欢后者）

我在考虑这样的事情，但我不知道如何调用背景属性：

<button style="font-size: 200%;color: white" onclick="document.body.style.background:url(https://vignette4.wikia.nocookie.net/joke-battles/images/5/5a/Black.jpg/revision/latest?cb=20161223050425) = 'black';">Click here if the page lags</button>

Answer 1

要更改背景，您必须先删除背景图像，假设您之前已设置背景颜色。虽然你可以使用JQuery来做到这一点，但它有点矫枉过正。

此外，请勿使用内嵌HTML事件属性（onclick，onmouseover等）：

创建难以阅读和调试的“意大利面条代码”。
导致代码重复。
不能很好地扩展
请勿使用 separation of concerns 开发方法。
围绕属性值创建匿名全局包装函数，这些函数会改变回调函数中的this绑定。
请勿关注 W3C Event Standard 。

相反，请在JavaScript中完成所有工作并使用 .addEventListener() 设置事件处理程序。

同样，尽可能避免使用内联CSS样式。

以下是代码：

// Get references to the DOM elements you'll work with
var bdy = document.body;
var btn = document.getElementById("btnChange");

// Set up the button to have a click event handler:
btn.addEventListener("click", function(){
  /* Just remove the image and the page will revert to the previously set color */
  bdy.style.backgroundImage = "url('')";
});

body{
  background: url(https://media.giphy.com/media/ko7twHhomhk8E/giphy.gif) no-repeat center center fixed #000; 
  background-size: cover;
}

#btnChange {
  font-size: 200%;
  color: white;
}

<button id="btnChange">Click here if the page lags</button>

Answer 2

你走在正确的轨道上。您的onclick属性需要稍微修正一下。这是一个有效的例子：

＆＃13;

body {
  height: 100vh;
  background: url(https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg) no-repeat center center fixed; 
  background-size: cover;
}

＆＃13;

<head>
    <meta charset="UTF-8"> <!-- to load my bloody euro sign-->
        <title>
            CV - Rogier
        </title>
</head>

<body>
    <button style="font-size: 200%;color: white" onclick="document.body.style.background = 'black';">Click here if the page lags</button>
</body>

＆＃13;

正如@ScottMarcus所指出的，你应该避免使用内联事件处理程序（如onclick）。更简洁，更易于管理的方法是通过JavaScript添加事件处理程序，如下所示：

document.getElementsByTagName('button')[0].addEventListener('click', function() {
    document.body.style.background = 'black';
});

Answer 3

这里是更改背景的jquery代码

$('button').click(function()
   {

    $('body').css("background","url(/myimage.jpg) #000");

   });

单击时将网站背景从gif更改为颜色

3 个答案: