在框架集下放置背景答案

【问题标题】：Putting a background under a frameset在框架集下放置背景
【发布时间】：2013-03-28 19:56:26
【问题描述】：

我想要做的可能很简单。我的 index.html 目前有框架。我有一个顶部，左侧，右侧底部和中心框架。这使我的页面看起来很尴尬。这是我的 index.html：

    <html>
    <head>
    <title>Support Portal</title>
    </head>
    <frameset rows="28,*,5" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,110" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
        <frame name="footer" src="footer.html">
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>

我希望做的是获取我的“content.html”和所有其他 html 文件并使背景颜色透明，然后在所有内容后面放置背景图像，这样页面看起来更像是一页，而不是 5 个放在一起。这是我的内容页面的顶部：

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body {
        font-family:Ubuntu, sans-serif;
        font-size:10pt;
        margin:10px;
        background-color:transparent;
        }
    a {
        color:white;
        }

我将如何实现这一目标？

【问题讨论】：

标签： html css styles frames frameset

【解决方案1】：

不，使用框架，每个文档都是独立的，不允许其他任何内容（大多数情况下，底部的代码可能在某些浏览器中工作......）你可以像这样破解它：

在 top_nav.html 的 css 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

在菜单_1.html 的 css 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px 0;
}

在 content.html 的 css 中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px -110px;
}

在相关.html的css中：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px right;
    /* this may not work as the image may be too big... */
}

在css中为footer.html：

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom 0;
    /* this may not work as the image may be too tall... */
}

这将是最有可能跨浏览器工作的解决方案......但是，我认为以下内容适用于某些浏览器。

frameset {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

【讨论】：

所有答案都是正确的：这不是我应该这样做的方式。不过，您的回答非常独特/有趣。谢谢，干杯，+1。

【解决方案2】：

您根本不应该使用框架。它很旧，不可靠。你应该使用的是div。如果您只想更改页面的一部分，可以使用 javascript 和 jQuery。

在使用 div 时，可以在 CSS 中使用background 属性来操作特定元素的背景，例如：

background-color: #FFF;

您还应该使用单独的 CSS 文件并在 head 标记中链接到它（在任何 javascript 文件之前）：

<link rel="stylesheet" type="text/css" href="styles.css">

【讨论】：

“你根本不应该使用框架。它很旧而且不可靠。”评论需要详细说明，以免产生误导。一切都比其他用途更适合某些目的。

【解决方案3】：

做你想做的事的现代方式是使用 Javascript。例如，您希望拥有许多静态页面并构建一个网站，而不必每次在菜单上添加内容时都需要编辑 10 个页面。

我不同意您的观点，但无论如何，您正在寻找 Ajax 内容加载（您将页面加载到一个中）。

或者您可以构建您的主页布局，然后将 iframe 与可以有页面背景。

我真的不认为你应该这样做，但是......

<html>
    <head>
        <title>Support Portal</title>
        <style>
            body{
                /*background-image here*/
            }
        </style>
    </head>
    <body>
        <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
            <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
            <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
                <div style="position:relative;height:100%;width:100%;">
                    <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                    <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                        <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                    </div>
                    <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
                </div>
            </div>
            <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
        </div>
    </body>
</html>

它正在工作

【讨论】：

【解决方案4】：

试试对我有用

<html>
<head>
    <title>Support Portal</title>
    <style>
        HTML{
            /*background-image here*/
        }
    </style>
</head>
<body>
    <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
        <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
        <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
            <div style="position:relative;height:100%;width:100%;">
                <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                    <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                </div>
                <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
            </div>
        </div>
        <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
    </div>
</body>

【讨论】：

仅代码答案几乎总是可以通过添加一些解释来改进。对于像这样的老问题，特别是对于已接受的答案，解释您的答案与现有答案有何不同，或者它为问题带来了哪些新信息是很有用的。
@feckie - 我很高兴你以某种方式找到了这篇旧帖子的方法，但我认为普遍的共识是 iframe 已被弃用。如果需要 iframe，这个问题应该通过 JS 或 CSS hacks 来解决。