Question

我想做的事情可能很简单。我目前在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文件都设置为透明背景颜色，然后将背景图片放在所有内容之后，使页面更像是1页，而不是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;
        }

我将如何完成此任务？

Answer 1

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

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

background-color: #FFF;

你也应该使用一个单独的CSS文件并在head标签中链接到它（在任何javascript文件之前）：

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

Answer 2

不，对于框架，每个文档是独立的，没有其他任何东西是允许的（大多数情况下，底部的代码可能在某些浏览器中有效......）你可以像这样破解它：

在top_av.html的css中：

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

在menu_1.html的css中：

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

在css for content.html中：

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

在css for related.html：

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... */
}

在footss.html的css中：

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

Answer 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>

它正在运作

Answer 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>

将背景放在框架集下

4 个答案: