Html 将背景置于框架集之下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15690996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting a background under a frameset
提问by brandoncluff
What I am trying to do is probably very simple. I currently have frames in my index.html. I have a top, left, right bottom and center frame. This makes my page look pretty awkward. Here is my index.html:
我想要做的可能很简单。我目前在我的 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>
What I was hoping to do was take my 'content.html' and all of my other html files and make the background-color transparent, and then put a background image behind everything so the page would look more like 1 page, instead of 5 put together. Here is the top of my content page:
我希望做的是获取我的“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;
}
How would I go about accomplishing this?
我将如何实现这一目标？
回答by refaelio
You shouldn't use frames at all. It's old and not reliable. What you should use is divs. If you want only one part of the page to change, you can use javascript and jQuery.
你根本不应该使用框架。它很旧而且不可靠。您应该使用的是 div。如果您只想更改页面的一部分，则可以使用 javascript 和 jQuery。
When using divs, you can use backgroundproperty in CSS to manipulate the background of specific element, e.g.:
使用 div 时，您可以使用backgroundCSS 中的属性来操作特定元素的背景，例如：
background-color: #FFF;
You also should use a seperate CSS file and link to it in the head tag (BEFORE any javascript file):
您还应该使用单独的 CSS 文件并在 head 标签中链接到它（在任何 javascript 文件之前）：
<link rel="stylesheet" type="text/css" href="styles.css">
回答by philwills
Nope, with frames, each document is separate and nothing else is allowed (mostly, the code at the bottom may work in some browsers...) You could kind of hack it in like so:
不，对于框架，每个文档都是独立的，不允许其他任何东西（大多数情况下，底部的代码可能在某些浏览器中有效......）你可以像这样破解它：
In css for top_nav.html:
在 top_nav.html 的 css 中：
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
In css for menu_1.html:
在 menu_1.html 的 css 中：
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: -28px 0;
}
In css for content.html:
在 content.html 的 css 中：
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: -28px -110px;
}
In css for related.html:
在related.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... */
}
In css for footer.html:
在footer.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... */
}
That will be the solution to most likely work across browsers... however, I think the following works in some browsers.
这将是最有可能跨浏览器工作的解决方案......但是，我认为以下内容适用于某些浏览器。
frameset {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
回答by DarkThanos
The modern way of doing what you are trying to do, is with Javascript. You want to have many static pages and built a web site with out having to edit 10 pages every time you want to add something on the menu for example.
做你想做的事情的现代方式是使用 Javascript。例如，您想要拥有许多静态页面并构建一个网站，而不必每次想要在菜单上添加内容时都编辑 10 个页面。
I don't agree with you but anyway, you are looking for Ajax content load (you load your pages into one).
我不同意您的观点，但无论如何，您正在寻找 Ajax 内容加载（您将页面加载到一个页面中）。
Or you can built your main page layout and then put iframes with can have the pages background.
或者你可以建立你的主页面布局，然后把 iframes 放在可以有页面背景的地方。
I realy dont think that you should do tha but...
我真的不认为你应该这样做，但是......
<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>
It is working
这是工作
回答by Feckie
Try it works for me
试试对我有用
<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>
