我需要为网站制作背景覆盖整个屏幕,但垂直平铺。我不能使用 HTML5。这是网站,抱歉代码很乱我几年前写了原始代码,当时我不知道如何正确组织代码。
问问题
7598 次
3 回答
3
使用带有 repeat-y 选项的 CSS background-image 的问题是图像不会填满屏幕的宽度。
要使图像填充宽度并垂直平铺,请执行以下操作。我已经测试过了,它可以工作。
<div class="background">
删除包含背景图像的当前块将以下代码块添加到
<center>
页面上的元素<center style=""> <div class="background"> <img src="BG/b1.jpg" /> <img src="BG/b1.jpg" /> <img src="BG/b1.jpg" /> </div> ...rest of code
现在添加/修改以下 CSS 语句
center { position:relative; } .background { height:100%; width:100%; min-height:800px; min-width:760px; position:absolute; overflow:hidden; left:0px; top:0px; z-index:-1; } .background img { display:block; height:auto; width:100%; min-height: 800px; min-width:760px; }
于 2012-04-02T23:53:10.693 回答
1
这是我相信您正在寻找的解决方案。您也可以使用长度(例如50px
)代替auto
高度。
#background {
background-image:url("image.png");
background-size:100% auto;
background-repeat:repeat-y;
}
工作示例
- 水平拉伸 + 垂直重复 Base64 背景(在 Firefox 11 和 Chrome 中测试)
浏览器支持
- Firefox 4+(如果包含 3.6
-moz-background-size
) - Safari 4.1+(如果包含 3.0
-webkit-background-size
) - 铬合金
- Opera 10+(如果包含 9.5
-o-background-size
) - Internet Explorer 9+(IE8 及更低版本的背景未调整大小)
于 2012-04-02T23:21:11.763 回答
0
在你的 CSS 中使用 background-repeat:repeat-y 垂直重复。使用 background-repeat:repeat 垂直和水平重复。
http://www.w3schools.com/cssref/pr_background-repeat.asp
CSS
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
于 2012-04-02T23:00:45.343 回答