词条 | background |
释义 | 电脑服务保留网络带宽,主要是自动更新吧,占用网资源 background 背景 (background) 属性定义元素的背景效果 元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分,且边框画在背景上。 CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果;CSS 在这方面的能力远远在 HTML 之上。 background 是用于在一个声明中设置所有背景属性的一个简写属性。 格式: background: {属性值} 继承性: NO 可能的值: background-color background-image background-repeat background-attachment background-position 注:可以在此声明中声明1到5个背景属性 这只是 CSS 1.0 的属性 在CSS 2.0 background已经退出了历史舞台; 例: <style type="text/css"> body { background: #ff0000 url('i/eg_bg_03.gif') no-repeat fixed center; } </style> background属性详解及实例:background-color:{颜色值|transparent(默认值)} 属性设置元素的背景颜色。 color 颜色值可以是颜色名称、rgb 值或者十六进制数。 transparent 默认。背景颜色为透明。 例: body { background-color: #00FF00 } 1.background-image:{URL(url)} 把图像设置为背景。 url(URL) 指向图像的路径。 none 默认。无背景图像。 例: body { background-image: url(pic.jpg); } 2.background-repeat:{repeat|no-repeat|repeat-X|repeat-Y} 设置背景图像是否及如何重复。 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 例: body { background-image: url(pic.jpg); background-repeat: no-repeat; } 3.background-attachment:{fixed|scroll} 背景图像是否固定或者随着页面的其余部分滚动 scroll 默认。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 例: body { background-attachment: fixed; background-image: url(pic.jpg); } 4.background-position:{位置值} 属性设置背景图像的起始位置。 top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos 使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的background-position: 100% 50%; 就是将背景图片的100%(right) 50%(center)这个点,和元素的100%(right) 50%(center)这个点对齐。 使用数值需要注意的是,当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%。 例: body { background-image: url(pic.jpg); background-position: top; } 用javascript改变背景图片 例: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 1</title> <script language="javascript"> function hi() { document.body.style.background="no-repeat url(../images/asp_logo1.gif) 50% 50%"; } </script> </head> <body> <input type="button" value="显示" onclick="javascript:hi()"> </body> </html> |
随便看 |
|
百科全书收录4421916条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。