Question

如何设置一个背景直到页面的一半，另一个背景从页面的一半设置到结尾，而内容div仍然在页面的正中间？请添加一个示例！

<body><div id="right"><div id="content"></div></div></div>

CSS

body{ background:url("../a.gif") repeat-x scroll left top transparent;height:632px;} 

right{background:url("../r.jpg") repeat-x scroll right top transparent;margin-left:50%;width:100%;} 

content{width:980px;}

问题 - 背景设置正常，但内容div不在页面中间....

任何解决方案？

Answer 1

使用css3：

html{ 

background: url(http://placehold.it/50x50) top left no-repeat,
url(http://placehold.it/50x50) top right no-repeat;

}

http://jsfiddle.net/jfkqd/

水平居中

.content{
margin:0 auto;
width:200px;
height:200px;

}

（需要text-align:center;才能使用ie）

水平和垂直居中：

.content{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;

}

Answer 2

没有css3：

html
{
  background: url(...) x y repeat;//x and y for wherever it needs to start, repeat can be any value, up to you.
}

body
{
  background-image: url(...) top left repeat-x; // or no-repeat if you only want it once
}

如何用CSS设置自定义两个背景？

2 个答案: