如何设置背景颜色时，正文尺寸小于视窗?

我在body中设置了这个动画，使body缩小到比viewport区域小得多的尺寸。但是当主体动画发生时，视口背景颜色的其余部分呈现白色。我不能控制那个颜色，那个区域是什么?它是根还是html?我试图设置一个背景颜色属性的根和html，但它使身体的动画隐藏/丢失。我有一个深/黑色的身体背景设置后的动画。但是在body动画期间，背景的其余部分显示为白色，我需要将其更改为黑色。

CSS

body 
{
background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
background-repeat: no-repeat;
background-position: top center; 
background-size: 85% 2%; 
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
background-size: 85% 2%;
animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
from
{
background-size: 85% 2%;
}
to
{
background-size: 45% 2%;
}
}

JAVASCRIPT

setInterval(function() 
{      
document.body.style.background = "rgba(0,0,0,1)";  

}, 400);

添加html { background-color: rgba(0,0,0,1); }将前400 ms变为黑色背景，但身体动画不起作用。只有在(chrome://flags/)下强制chrome为暗模式才能使背景的其余部分具有所需的身体动画。发生了什么事?我怎样才能同时解决这两个问题呢?

你根本没有改变正文的大小——只是改变其整体背景的一部分大小。

所以要让屏幕的其余部分变成黑色，你可以设置它的背景色，不需要在动画结束时调用JS来做，你需要整个过程。

还请注意，IOS在某些版本中存在固定附件的问题，因此已删除此问题。

body 
{
background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
background-repeat: no-repeat;
background-position: top center; 
background-size: 85% 2%; 
width: 100vw;
height: 100vh;
background-color:black;
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
background-size: 85% 2%;
animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
from
{
background-size: 85% 2%;
}
to
{
background-size: 45% 2%;
}
}

在动画中使用重要关键字更改背景或设置颜色


body 
{
background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
background-repeat: no-repeat;
background-position: top center; 
background-size: 85% 2%; 
width: 100vw;
height: 100vh;
background-color:black !important;
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
background-size: 85% 2%;
animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
from
{
background-size: 85% 2%;
}
to
{
background-size: 45% 2%;
}
}


body 
{
background-image: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
background-repeat: no-repeat;
background-position: top center; 
background-size: 85% 2%; 
width: 100vw;
height: 100vh;
background-color:black !important;
}
@media only screen and (max-width: 615px) and (orientation: portrait)
{
body 
{
background-size: 85% 2%;
animation: mooveme 0.4s;
}
}
@keyframes mooveme
{
from
{
background-size: 85% 2%;
backgroun-color: black;
}
to
{
background-size: 45% 2%;
backgroun-color: black;
}
}

设置根元素的背景—只是确认您使用了伪选择器:?

/* Selects the root element of the document:
<html> in the case of HTML */
:root {
background: yellow;
}

也就是说，如果你设置body和html元素的背景，听起来会出现一些异常，如果你设置<html>背景，那么<body>元素的行为就像一个常规的<div>元素，也就是说，它的高度将由它的内容决定。

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

https://developer.mozilla.org/en-US/docs/Web/CSS/:根

相关内容

最新更新

热门标签：