1

我需要为网站制作背景覆盖整个屏幕,但垂直平铺。我不能使用 HTML5。这是网站,抱歉代码很乱我几年前写了原始代码,当时我不知道如何正确组织代码。

4

3 回答 3

3

使用带有 repeat-y 选项的 CSS background-image 的问题是图像不会填满屏幕的宽度。

要使图像填充宽度并垂直平铺,请执行以下操作。我已经测试过了,它可以工作。

  1. <div class="background">删除包含背景图像的当前块

  2. 将以下代码块添加到<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
    
  3. 现在添加/修改以下 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;
}

工作示例

浏览器支持

  • 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 回答