使用CSS在frameset中设置背景图片
"在frameset框架集中应用背景图片,适合WEB开发人员,用于构建美观的网页外观。通过CSS实现每个frame的独立背景设置。" 在Web开发中,使用`<frameset>`元素可以创建一个多窗口的布局,允许网页内容被分割成多个独立的部分,每个部分(frame)可以加载不同的HTML文档。这种技术在早期的网页设计中很常见,但现在已经被更现代的布局方法如CSS Grid或Flexbox所取代。然而,理解如何在frameset中应用背景图片仍然有一定的价值,尤其是对于处理旧代码库或学习Web开发历史的开发者。 在给定的例子中,我们看到一个包含三个frame的frameset布局。首先,`<frameset>`标签定义了整体的框架结构,它有两个属性:`rows`和`cols`。在这里,`rows`设为`"100,*"`,表示顶部frame占据100像素,剩余的空间分配给下方的frameset。下方的frameset通过`cols`设为`"200,*"`,将左侧frame设定为200像素宽,右侧的frame则占据剩余的宽度。 每个frame通过`<frame>`标签定义,并通过`src`属性指定其加载的HTML文档,例如`top.html`, `left.html`, 和 `main.html`。`name`属性为每个frame提供了一个标识符,以便在JavaScript或链接中引用它们。`scrolling`属性可以控制是否显示滚动条,`noresize`禁止用户调整frame大小,`id`为frame提供了CSS选择器的依据。 每个HTML文档(如top.html、left.html和main.html)都包含了CSS代码,用于设置背景图片。在这些CSS样式中,`background-attachment`属性设置为`fixed`,意味着背景图片相对于视口固定,不会随着内容滚动。`background-image`定义了图片的URL,这里是同一张图片`DSC00548.JPG`。`background-repeat`设为`no-repeat`,防止图片在水平和垂直方向上重复。`background-position`分别设置图片在frame内的位置,例如在top.html中设为`left top`,在left.html中设为`0px -100px`,这样可以使图片在不同frame中呈现出不同的定位效果。 为了确保背景图片在每个frame内正确显示,需要对每个frame的body元素进行独立的CSS设置,因为每个frame实际上加载的是一个单独的HTML文档,有自己的CSS作用域。通过这种方式,可以实现每个frame具有独特背景图片的视觉效果,同时保持整体页面的一致性。 虽然现代Web开发倾向于避免使用frameset,但了解这种技术有助于理解Web开发的历史和进化过程,同时也可能在维护旧项目时遇到。对于新项目,更推荐使用CSS布局方法来实现多区域布局,以获得更好的浏览器兼容性和灵活性。
以前,当我们使用框架集时,如果要应用一张背景图,那么一般的方法是获得确切的框架尺寸后,用FW将图进行切割再分别进行背景设置。由此带来的问题就是:如果要更换一张背景图,那么切割操作将要重复进行,而且动态更换背景将比较复杂。
其实我们大可以应用CSS来简化我们的操作,在框架集中各框架完全可以应用同一张背景图,而背景的无缝接合可以使用CSS来指定。实例如下:
这里假定框架集如下:
<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame">
<frameset rows="*" cols="200,*" framespacing="0" frameborder="no" border="0">
<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame">
<frame src="main.html" name="mainFrame" id="mainFrame">
</frameset>
</frameset>
那么在top.html中定义CSS如下:
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-image: url(DSC00548.JPG);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
}
-->
</style>
下载后可阅读完整内容,剩余2页未读,立即下载
- 粉丝: 6
- 资源: 22
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦