Question

我有一个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);
}

Answer 1

您无需覆盖它； .bodyblue比正文具有更多的 specificity ，并且假设您的元素为<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'>

如果您发现此操作无效，请增加特异性，或使用background-image: none;上的.bodyblue删除背景。

如何在jQuery中覆盖身体的背景图像

1 个答案: