不使用<body>元素来设置页面背景

Question

不使用<body>元素来设置页面背景

6

我是新手，对CSS和Web设计不太熟悉，请多关照；-）

我想知道是否有可能在不引用标签的情况下定义页面背景（即屏幕的颜色）。因此不使用典型的方式：

body { background-color: #fff; }

我需要这么做是因为我正在编写css来美化我们的登录页面，但只能访问要插入到页面正文中的模板html。所以我的html看起来像这样（非常简化）：

<div id="loginpage"> 
  <div id="title"/>
  <div id="content"/>
</div>

我在网上找不到答案，因为这似乎是一种不寻常的方法。那么：如果可能的话，怎么做呢？

- franka

你可以使用div id来指定背景颜色（如果你不想使用body标签）。 - Kiran

“Without referring to the tag” 是什么意思？ - BoltClock

我的意思是在CSS中不对“body”进行样式设置，就像示例中一样。 - franka

问题并不清楚。在不改变身体样式的情况下，如何满足神秘的身体样式要求？当然，您总是可以设置html元素的样式，以便预期body元素的背景未设置（即默认为透明）。 - Jukka K. Korpela

我正在为页面进行样式设计，并被要求只包含与实际使用的HTML页面中的元素相关的CSS（请参见上文）。由于html和body元素不是HTML页面的这个部分的一部分，因此我想寻找一种在不引用它们的情况下设置背景颜色的方法。 - franka

我意识到这种做法很不寻常，但我相信存在解决方案！ - franka

4个回答

3

你可以使用 :root 选择器，如果您不介意失去 IE6-8 的支持。

但是，你是否尝试过针对 body 或 html 进行定位，尽管它们没有在代码中？它们仍然被插入到 DOM 中。

- Chris Morgan

1

+1 或者说，当模板被插入时它们仍然存在 :) - BoltClock

我最初确实这样做了（只针对body），但我的团队成员友好地提醒我，只为实际在我正在工作的页面上的元素设置样式...（而这不适用于body）。 - franka

当我说它们被插入到DOM中时，我的意思是确实如此。根据定义，它们确实如此。如果包含head元素，则无法信任旧版本的IE，但旧浏览器始终会插入html/head等内容，在HTML5中，解析器已经严格指定了如何处理诸如“缺少html元素”和“缺少body元素”的问题：请参见http://www.w3.org/TR/html5/tree-construction.html#the-before-html-insertion-mode和http://www.w3.org/TR/html5/tree-construction.html#the-after-head-insertion-mode中的“其他任何内容”部分。 - Chris Morgan

1

在我看来，你需要与团队成员和上级讨论这个问题。如果你找到了一个解决方法，明天你来上班时可能会发现有人已经添加了新的内容。

body { 
  background-color: #not-white !important;
}

在你的代码之后，下一个问题是如何在CSS中覆盖!important。

- Michael

0

顺便说一句，不允许您访问css/main模板的限制应该真的不要这样做。如果您继续这样工作，您最终会遇到很多解决方法，这可能会给您带来麻烦。

无论有什么限制，您都可以添加一个样式标签，如下所示：

<style type="text/css">
    body {background-color:#fff;}
</style>

如果优先级高于原始body规则（假设未篡改body流），则此方法将比为*设置背景颜色更安全，后者可能会产生意外的副作用。您还可以通过简写background:#fff;来设置它，这将重置之前应用的任何背景图像等。

更新

我刚刚看到了你的评论

我确实首先这样做了（只针对body），但我的团队成员友好地提醒我只对实际在我正在工作的页面上的元素进行样式设置...（而这不适用于body）。

假设这是一个有效的论点，而不是某种小气的专制，也许在loginpage元素上设置背景会更合适？您可以通过ID引用元素，如下所示：

<style type="text/css">
#loginpage {background-color:#fff;}
</style>

- Oleg

登录页面元素具有不同的颜色，它是页面中间的实际登录“框”。使用这种方法，我需要在 #loginpage 周围再加一个额外的 <div>（类似于 @Teak 的答案），但我希望避免这样做... - franka

@FSchmidt：按照body规则进行操作吧。没有理由不这样做-原始方法的逻辑非常简单：“如果我在登录页面上，那么将body背景设置为白色”，这正是您想要的！ - Oleg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Max · Accepted Answer

如何考虑：

<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999;">&nbsp;</div>

将其放置在所有其他HTML之上，如果必要，可以使用z-index: 1;