精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

利用CSS准确控制页面和元素背景


来源:builder.com.cn 时间:07-05-01 点击: 点击这里收藏本文

不必说,在放置单个背景图像时候,例如,在网页上放置公司图标的时候,这个指令是非常有用的。

控制背景图像滚动

最后,在CSS中,你可以设置在容器元素滚动的时候背景图像是否滚动。这个应用大部分使用在水印网页上,它使用background-attachment指令,可以接受scroll 或者fixed这两个值。Listing F这个例子告诉你如何产生一个出现在页面右上角的水印。

Listing F

<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
</style>
</head>
<body>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
</body>
</html>

现在,当你试图滚动这个页面的时候,右上角的图像会相对于浏览器窗口保持固定,它不会随页面上的其它内容滚动下来。

Figure F

利用CSS准确控制页面和元素背景
Listing F 示例

当然,这些例子只是CSS背景应用中很小的一部分。然而,它们应该给了你一个在实际应用中使用这些属性的方法,你现在也应该能将这些属性应用到你的程序中了。所以,现在你还等什么呢?开始编写这些令人愉悦的代码吧!

9 7 3 1 2 3 4 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.