gpt4 book ai didi

html - 将背景置于框架集下

转载 作者:太空宇宙 更新时间:2023-11-04 04:39:50 26 4
gpt4 key购买 nike

我想做的可能非常简单。我目前在 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;
}

我将如何着手完成这项工作?

最佳答案

不,有了框架,每个文档都是独立的,不允许有其他内容(大多数情况下,底部的代码可能在某些浏览器中工作......)你可以像这样破解它:

在 top_nav.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;
}

在 content.html 的 CSS 中:

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

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

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

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

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

关于html - 将背景置于框架集下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15690996/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com