如何在jquery中覆盖身体的背景图像[重复]答案

【问题标题】：How to override background Image of body in jquery [duplicate]如何在jquery中覆盖身体的背景图像[重复]
【发布时间】：2019-03-06 00:53:48
【问题描述】：

我有一个 jquery 函数 addbluebody() 将蓝色添加到正文中，

还有一个删除它的函数hideCongratAndBlueBody()。

My problem 是 i already had a fixed backgroundImage set for my body，因此是 blue color is not showing on calling addbluebody()

how to override the backgroundImage of body and make visible bluecolor and again show backgroundImage when hideCongratAndBlueBody() ia called.

function addBlueBody() {
            $('body').addClass('bodyblue');
        }
        
function hideCongratAndBlueBody() {
            timeOut = setTimeout(() => {
                $('body').removeClass('bodyblue');
            }, 4000);
        }

.bodyblue {
            background: #3da1d1;
            color: #fff;
        }

body{
	background-image:url(nature image.jpg);
}

【问题讨论】：

添加 background-image: none; 到你的 bodyblue 类
@scraaappy 我想在 hideCongratAndBlueBody() 上重新获得 backgroundImage
@obsidian-age 是的

标签： jquery html css

【解决方案1】：

您不需要覆盖它； .bodyblue 的 specificity 比 body 多，假设你的元素是 <body class='bodyblue'>，jQuery 会自动添加类并改变背景：

function addBlueBody() {
  $('body').addClass('bodyblue');
}

function hideCongratAndBlueBody() {
  timeOut = setTimeout(() => {
    $('body').removeClass('bodyblue');
  }, 4000);
}

.bodyblue {
  background: #3da1d1;
  color: #fff;
}

body {
  background-image: url(http://placehold.it/100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class='bodyblue'>

如果你发现这不起作用，要么增加特异性，要么在.bodyblue 上删除带有background-image: none; 的背景。

【讨论】：