PC快捷导航 | 免费赠品 | 联系我们 | Sitemap
友软科技联系电话:0311-82065950
营销型网站更赚钱
当前位置:友软科技 > 新闻资讯 > 建站资讯

如何用CSS控制网页背景图片

发表日期:2013/9/28   内容来源:

我们在访问一些网站的时候,偶尔会见到这样的网站设计效果:网站内容随滚动条滚动,但是网页背景图片不滚动,那么这样的效果是怎么实现的呢?这种效果实现就离不开css的配合,今天我们就来一起学习一下CSS控制网页背景图片的各种样式表。

在网页前端设计中CSS发挥着非常重要的作用,现在随着流量的不断升级,能够支持的css语法也越来越多,所以将来的网页设计效果也必然会越来越漂亮。

背景重复(background-repeat)

背景图象通常是平铺在背景上的,对吗?错。 利用这项CSS属性,你可以控制是否将其平铺。

P { background-repeat: no-repeat; background-image: url(/webmonkey/ 98/15/stuff3a/background.gif) }

上述规则应用于整个段落。我们以前用过的GIF 图象出现在文字后面,但由于我们应用了不重 复图象(no-repeat)规则,所以该图象不会重 复平铺在整个段落后面,它只显示一幅单独的 图象。

如果你只想让图象垂直或者水平方向平铺,你 可以使用repeat-x将其水平平铺,用repaet-y 将其垂直平铺。而repeat参数值则将图象从水 平和垂直两个方向平铺。

固定背景(background-attachment)

在HTML中,背景图象通常会随页面的滚动而一 起滚动。但利用CSS的固定背景(background) 属性,你可以建立不滚动的背景图象,页面滚 动时,背景图象可以保持固定。

BODY { background-attachment: fixed; background-image: url(/webmonkey/98/ 15/stuff3a/background.gif) }

该属性只用于页面背景,即标签内设定 的背景图象。

其参数有两种选择:

scroll指背景图象随文字内容一起滚动, 即通常所见的方式。
fixed指文字滚动时,背景图象保持固 定。
背景定位(background-position)

你可以设定将背景插在什么位置显示。

P { background-position: center bottom; background-image: url (background.gif) }

当上述CSS规则应用于本段文字时,背景图象 将在本段的中下部开始显示并向右平铺。

如果你看不到上述的显示效果,则说明你所使 用的浏览器是Communicator,它不支持背景定 位。

设定位置的3种方法:

关键字参数(Keyword values)
关键字设定方法简便易用:

top将背景图象同前景要素的顶部 对齐。
bottom将其同前景要素的底部对 齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中(如果使用在 另一关键字前面)或垂直居中(如 果用在另一关键字后面)。
长度参数
长度参数可以使用你对背景图象的位置 作出更精确的控制。你可以设定水平和 垂直定位起点,例:

P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) }

本段显示了上述规则的执行效果。IE支持 这种属性,将GIF图象设置在从左上角起 水平70象素,垂直10象素的位置。由于我 设置了 background-repeat: repeat-y, GIF图象将在文字后垂直平铺。

你可以使用我们以前学过的任何一种长度 单位,例如pixels, points, inches, ems等。

(IE 3不支持长度单位显示这种效果)

比例值(Percentage values)
你还可以使用比例值设定背景图象的位 置,例:

P { background-position: 75% 50%; background-image: url (background.gif) }

当这条CSS规则应用于本段时,背景图象 从水平距离段落右端70%,垂直距离段落 顶部50%的位置显示。如果你重新调整浏 览器窗口的尺寸,使得段落的显示尺寸变 化,背景图象的位置也相应发生变化。在 本段上不会发生这样的变化,因为本段的 尺寸是固定的,不会随着窗口尺寸的调整 而变化。

 

本文链接:http://www.urkeji.com/content/1665.html (转摘请注明出处)
若无特别注明,本站内容均为原创;网站优化业务请咨询本站在线客服!

建站套餐 最实惠的营销型网站建设套餐

虽然网络公司越来越多,但是依然满足不了现在市场的需求,这是为什么呢?我想大家都明白,因为现在互联网已经深入到各行各业,任何领域,如果你不懂电脑,不会用互联网获取信息,那你就会被别人所超越,无论是对于生活还是工作,互联网都给我们带来了极大的方便,可以毫不夸张的说,在未来的5年内,没有接触互联网的公司必将不复存在,这是一个必然的趋势,也是一个肯定的结论。 十年前,做网站似乎只属于那些大型企业或者有技术的个人站长,但是现在做网站是一个全民的概念,几乎任何人都有自己的网站,现在很多个人或者团队都有自己的官网,甚至在一些大公司的业务人员名片上都能看到他们个人的官网网站。 所以针对现在全民都有网站的现...展开阅读▽

Aspcms程序制作的网站有什么好处

现在越来越多的企业网站开始使用aspcms系统,这是一套非常优秀的企业网站开源程序,因为程序的开发组一直都在更新程序,并且根据各大安全检测厂商提供的安全漏洞报告不断修复系统漏洞,所以目前网络上完全开源的CMS建站系统中,这套aspcms建站程序可以说是安全性能较高的一个。 正如很多站长平常看到的一样,网络上大部分被黑客攻击或者挂马的开源程序中,aspcms是少的,反之Dedecms是最容易被攻击的一个开源程序,所以从安全角度来说,程序的安全及数据安全是aspcms的一大优势,这也是这套程序能被广泛接受的一个主要原因。 当然,使用Aspcms开源程序制作网站不仅仅是安全方面有优势,对于企业制...展开阅读▽

网站占用内存的原因及可能导致的结果

我们日常浏览网站的过程中肯定都遇到过这样的问题,当我们打开一个网站的时候电脑突然变的运行缓慢,甚至有一些配置低的电脑还会出现卡死的现象。这其实就是网站建设过程的一些不良的代码造成的,使得网站运行过程中占用电脑过多内存,不能及时得以释放,于是就会出现电脑运行缓慢或者卡死等情况。 网站程序占用内存大的主要原因有那些呢? 首先、我们在网站建设过程中一定要注意网站编程语言的书写的规范性,不要写那些没有结束语的代码,在多语法的判断型代码中如果缺少结束语可能不会影响前台的展示效果,但是因为代码还没有结束,所以浏览器就会不断向服务器下载并发送请求,这种情况就容易导致网站占用内存较大、运行缓慢。所以我们写...展开阅读▽