个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
$("#toggle").click(function(){
$("html").toggleClass("bg");
});html.bg {
background: blue;
}
body {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="bg">
<head>
</head>
<body>
Test
<br>
<button id="toggle">Toggle HTML background</button>
</body>
</html>我发现如果将 CSS 背景应用于 body，它会占据整个页面(无论 body 的实际高度或宽度是多少)。
但是，如果您将 CSS 背景应用于 html 和 body，则 body 的背景 不会占用整个页面。
这种差异是预期的行为吗？
我将如何叠加两个全屏背景(例如，背景颜色和半透明图像？)
最佳答案
This is correct behavior .1 In standards mode , body, as well as html 不会立即占据视口(viewport)的整个高度，即使它在您仅应用时看起来如此后者的背景。事实上，如果你不给它自己的背景，html 元素将采用 body 的背景，而 html 将通过这个在 Canvas 上:
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.
For documents whose root element is an HTML
HTMLelement or an XHTMLhtmlelement: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for theBODYelement rather than theHTMLelement.
也就是说，您可以在单个元素(html 或 body)的背景颜色上叠加任何背景图像，而不必依赖两个元素— 只需使用 background-color 和 background-image 或将它们组合在 background 速记属性中:
body {
background: #ddd url(background.png) center top no-repeat;
}
如果您希望合并两个背景图像，您需要依赖多个背景。主要有两天的时间来做这件事:
在 CSS2 中，这就是为这两个元素设置样式的地方:只需将背景图片设置为 html，将另一张图片设置为 body，您希望将其叠加在第一。为了确保 body 上的背景图像以全视口(viewport)高度显示，您还需要分别应用 height 和 min-height:
html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
顺便说一下，为什么你必须分别指定 height 和 min-height 到 html 和 body是因为两个元素都没有任何固有高度。默认情况下，两者都是 height: auto。它是具有 100% 高度的视口(viewport)，因此 height: 100% 从视口(viewport)中获取，然后作为允许内容滚动的最小值应用于 body。
在 CSS3 中，语法得到了扩展，因此您可以 declare multiple background values in a single property ，无需将背景应用于多个元素(或调整 height/min-height ):
body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
唯一需要注意的是，在单个多层背景中，只有最底层可能有背景色。您可以在此示例中看到上层缺少 transparent 值。
别担心 — 即使您使用多层背景，上面指定的传播背景值的行为也完全相同。
不过，如果您需要支持旧版浏览器，则需要使用 CSS2 方法，该方法一直支持到 IE7。
我在 this other answer 下的评论通过附带的 fiddle 解释了 body 实际上是如何在默认情况下从 html 偏移的，即使它看起来像是被填充了，再次由于这种看似奇怪的现象。
1 这可能源于设置 body 的 HTML background 和 bgcolor 属性导致背景属性应用于整个视口(viewport)。有关 here 的更多信息。
关于html - 将背景应用于 <html> 和/或 <body>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46154471/
24
4
0
我写了几个命令来转换数据框，但我想将我写的代码简化为四个部分。第 1,2 和 3 部分用于计算第 1、2 和 3 列(计算每列重复值的次数，并完成 0 和三列最大值之间的缺失数)。第四部分是加入前面的
我试图理解应用于函数的类型参数。 我想在下面的方法中使用通用类型，但为了我的理解使用 String 和 Int。 当我如下定义一个函数时 def myfunc[Int](f:String => I
我有一个像下面这样的 DIV: // link to some js .js 在 div 中呈现最新的文章摘要。然而，它在 Calibri
我在 GridView 中有以下列，一列是日期，另一列是美元金额。我应用了格式并将 HtmlEncode 属性设置为 false，但值仍然未格式化: 这就是这些值在 GridView 中的显示方式
假设我已经定义了这些类型: data Km = Km Float deriving (Show, Eq) data Mile = Mile Float deriving (Show, Eq
我有一个关于 value in context 的小问题。 取 Just 'a'，所以在这种情况下 Maybe 类型上下文中的值是 'a' 采用[3]，因此在这种情况下，[a] 类型上下文中的值为3
require(quantmod) require(PerformanceAnalytics) getSymbols('INTC') x<- monthlyReturn(INTC) rollapply
我正在使用 VBA 对“已应用字轨更改”文档进行更改。 红色段落结束标记是插入段落结束标记。(打开“跟踪更改”> 将光标放在第一段末尾 > 按 Enter > 插入新段落内容 > 格式风格不同) 我需
考虑以下代码: class A{ my_method(const B& b){ import_something_from_c(this, b.getC()); // does some
我正在为自定义 Material 分配图像。分配的图像看起来有点像素化，类似于此图像 我已经将抗锯齿设置为 4 倍。我该如何解决这个问题？ 最佳答案 尝试将 Material 的 mipFilter
我将样式应用于 元素和 元素。是否可以在 上使用样式元素应用于 似乎不遵循 CSS 特异性的通常规则。这是真的吗？ 示例:http://jsfiddle.net/59dpy/ 尝试将所有背景色设为红
有没有办法将垂直虚线边框应用于 没有他们(边界)合并？我说的是附图上的东西——有 3 个 这里的元素，每个元素包含 2 的。如果我申请 border-right: 1px dashed black到
当我在 CSS 中对主体应用线性渐变时，如下所示 body { background: linear-gradient(#10416b, black); } 它不会将它应用到整个网页，而是将它应用到页
当我将边框和边框半径应用于 td 时，内半径是一个直 Angular ，根本不是圆的。 最佳答案 问题很可能是背景不透明的子元素会剪掉边框的内半径。 要解决此问题，您可以在 td 上应用 overfl
基本上，我有一个小的 SVG，它使用一个组来定义一个可重用的符号。该组包括我想在 CSS 中设置动画的路径。我面临的问题是只有“原始”元素应用了 CSS，“使用过”的元素没有。 .player_arr
宽度属性在这里不起作用: td { height: 50px; width: 25px; border: 1px
我想要一个函数(例如)在两种情况下输出 Map 的所有值: Map map1 = new HashMap(); Map map2 = new HashMap(); output(map1, "1234
我被要求将我们应用中的警报对话框的外观与应用主题使用的外观相匹配。 我设法将样式应用于应用程序中的所有警报对话框，并将其用作应用程序主题的一部分，但有些情况下样式应用不正确。 例如，当警报对话框包含“
我有一个 CGPath(由 UIBezierPath 创建)，我想通过应用 CGAffineTransformScale 将其缩放到我想要的任何大小。 这会影响我的绘图质量(在转换为图像时)吗？如果不
您好，我已经在 vector 上使用了一些 STL 算法，例如 find_if、count_if、sort、push_back 等。现在我想为所有容器对象( vector 、列表、映射、集合)制作一个
我是一名优秀的程序员,十分优秀！