新浪博客

网页设计中图片设置居中平铺的方法

2012-02-11 02:46阅读:
背景图片居中、平铺等设置方法网页背景没有拉申功能,
css中背景图片的设置:
不平铺:background-repeat: no-repeat;
横向平铺:background-repeat: repeat-x;
纵向平铺:background-repeat: repeat-y;
固定:background-attachment: fixed;
滚动:background-attachment: scroll;
水平居中:background-position: center;
水平居中并垂直居中:background-position: center center;
<SCRIPT LANGUAGE='JavaScript1.2'>
<!-- Begin
if (screen.height >= 768 && screen.width >= 1024) {
document.write('<img src='1024.jpg' width=1024 border=0>');
}
else {
if (screen.height == 600 && screen.width == 800) {
document.write('<img src='800.jpg' width=800 border=0>');
}
else {
document.write('<img src='1024.jpg' width=300 border=0>');
}
}
// End -->
</script>

///////////////-----------/////////////////////
<html><head>
<STYLE>
body
{background-image:url(tx/bg-w-780.gif); background-repeat:repeat-y; background-position:center }
</STYLE>
</head>
<body bgproperties='fixed'> <!-- background-color 定义背景色
background-image 定义背景图案background-image:url(路径)
background-repeat 重复方式 repeat-x:水平重复,repeat-y:垂直 no-repeat:不重复
background-attachment 设置滚动 scroll:滚动,fixed:固定
background-position 起始位置 percent,length,center,right,lefth,middle,top,bottom;如果是一个值则是x坐标
background-repeat版本:CSS1  兼容性:IE4+ NS4+ 继承性:无


语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数:

repeat :  背景图像在纵向和横向上平铺
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺

说明:

设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
对应的脚本特性为backgroundRepeat。请参阅我编写的其他书目。

示例:

menu { background: url('images/aardvark.gif'); background-repeat: repeat-y; }
p { background: url('images/aardvark.gif'); background-repeat: no-repeat; } -->
</body>
</html>

我的更多文章

下载客户端阅读体验更佳

APP专享