正文尺寸小于视口时如何设置背景颜色？

Question

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

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); } html { background-color: rgba(0,0,0,1); }将前 400 毫秒更改为黑色背景，但身体动画不起作用。 只有在 (chrome://flags/) 下强制 chrome 进入暗模式才能使背景的其余部分变黑并具有所需的主体动画。 到底是怎么回事？ 我该如何解决这两个问题？

Answer 1

您根本没有改变身体的大小 - 只是其整体背景的一部分的大小。

因此，要让屏幕的其余部分变黑，您只需设置其背景颜色，无需在动画结束时调用 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%; } }

Answer 2

使用 !important 关键字进行背景更改或在动画中设置颜色


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;
    }
}

Answer 3

设置根元素的背景 - 只需确认您使用了伪选择器: ？

/* 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/:root

正文尺寸小于视口时如何设置背景颜色？

问题描述

3 个解决方案

解决方案1
1 已采纳 2022-05-09 07:46:18

解决方案2
1 2022-05-09 07:59:22

解决方案3
0 2022-05-09 04:46:57

正文尺寸小于视口时如何设置背景颜色？

问题描述

3 个解决方案

解决方案1 1 已采纳 2022-05-09 07:46:18

解决方案2 1 2022-05-09 07:59:22

解决方案3 0 2022-05-09 04:46:57

解决方案1
1 已采纳 2022-05-09 07:46:18

解决方案2
1 2022-05-09 07:59:22

解决方案3
0 2022-05-09 04:46:57