css 关于body和html元素的背景颜色的困惑[重复]

lbsnaicq  于 2023-08-08  发布在  其他
关注(0)|答案(7)|浏览(125)

此问题在此处已有答案

Color of stacked semi-transparent boxes depends on order?(4个答案)
昨天关门了。
我设置了body和html元素background-color: rgb(35, 39, 47, 0.78);的背景色,但在预览时,我在网页中得到了两种颜色。怎么了?发生什么事了?这是源代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>RGBA</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 500px;
      }
      html,
      body {
        background-color: rgb(35, 39, 47, 0.78);
      }
    </style>
  </head>
  <body></body>
</html>

字符串
预览时的图片:


的数据
我尝试只设置body元素的背景颜色,我得到一种颜色。在我的观点中,两种颜色叠加形成一种新的颜色,这是body元素的实际背景色,不是吗?

tvz2xvvm

tvz2xvvm1#

删除这个CSS

body {
  height: 500px;
}

字符串

mf98qq94

mf98qq942#

我注意到问题在于设置一个CSS属性background-color,其中包含一个alpha通道,即rgb(35,39,47,0.78)。然而,这里的问题是HTML和CSS中的background-color属性不支持Alpha通道的颜色值。

ehxuflar

ehxuflar3#

因为你设定了一个高度500 px;在身体上

ccrfmcuu

ccrfmcuu4#

我设置了body和html元素的背景色background-color:RGB(35,39,47,0.78);,但是我在预览的时候在网页上得到了两种颜色。怎么会?发生什么事了?
由于您可以透过BODY(部分)看到,因此它的背景颜色会与HTML的背景颜色混合。(考虑一下,如果你有两张半透明的红色塑料,你把一张和另一张半重叠,它们重叠的地方颜色更深)。
因此,在底部,您可以看到rgb(35, 39, 47, 0.78);(HTML颜色),在顶部,您可以看到rgb(35, 39, 47, 0.78); blended with rgb(35,39,47,0.78);(车身颜色)。

.red { background: rgba(255, 0, 0, 0.5); }
.yellow { background: rgba(255, 255, 0, 0.5); }

.red, .yellow {
    height: 150px;
    width: 150px;
    border: solid orange 1px;
    position: absolute;
}

.red { top: 10px; left: 10px; z-index: 2;}
.red + .red { left: 85px; z-index: 3 }
.yellow { top: 85px; left: 45px; z-index: 1; }

个字符
我试着只设置body元素的背景色,我得到一种颜色。
由于历史原因(与CSS之前使用BODY元素上的bgcolor属性设置文档背景色的方式有关),CSS规范要求在满足以下条件时进行:

  • 您正在设置HTML文档的样式
  • 将背景颜色应用于BODY元素
    *将背景颜色应用于HTML元素

......则BODY元素的背景颜色将移动到HTML元素。

hl0ma9xz

hl0ma9xz5#

这是因为background-color:rgb()属性的第四个参数用于设置元素的透明度!由于body元素的级别高于html元素的级别,因此将body元素的background-color:rgb()属性的第四个参数设置为小于1将导致html元素的部分颜色穿过body元素,从而导致您看到更深的颜色
希望我的回答能对你有所帮助

kpbwa7wx

kpbwa7wx6#

此位不准确-在时间允许时重写。请参见下面的注解:带有HTML标记的元素的高度被定义为视口高度。
在屏幕上,这通常是屏幕的高度减去用于其他事情的任何位。
因此,为HTML元素提供了一个部分透明的深灰色背景,覆盖了视口。
我认为这是不准确的位的结束。
然后,body元素的高度为500 px,因此会绘制另一个部分透明颜色的图层,但仅适用于500 px。
在两种部分透明颜色重叠的地方,系统会计算出新颜色应该是什么。基本的rgb颜色在这种情况下是相同的。Alpha通道(示例中为0.78)将获得一个新值,该值是根据两个重叠的Alpha通道计算得出的:
顶部Alpha通道+底部Alpha通道 *(1 -顶部Alpha通道)
参见Alpha Compositing Algorithm (Blend Modes)
在这两种情况下输入0.78值,则新的Alpha通道(=不透明度)值为0.9516。
所以,它是黑暗的-有点不透明-但它不是完全不透明的。
如果您只想让 windows (用户在任何时候看到的位)具有原始颜色,那么只需为html元素设置它。
或者只是为身体设置。整个视口将拾取该背景色,但(原因我希望有人能解释-更新:这里公认的答案解释了这一点:Why does styling the background of the body element affect the entire screen?)不会发生主体和视口颜色的混合,因此您可以在整个视口上看到所需的颜色。
当然,你是否想把你的身体设置为固定的500 px将取决于你的特定上下文。

fafcakar

fafcakar7#

这是因为你给了一个500px的身体高度。因为你同时给HTML和Body上色,所以它们会重叠到500px的高度,这就是为什么上面500px的颜色比下面的颜色深。你可以从你的CSS中删除下面的代码:

body{
    height: 500px;
}

字符串
或者你可以从以下位置删除HTML:

html,body{
    background-color: rgb(35, 39, 47, 0.78);
}


这将解决您的问题。谢谢你的好意

相关问题