首页 文章

我可以使用CSS获得多个背景图像吗?

提问于
浏览
307

是否可以有两个背景图像?例如,我希望在顶部重复一个图像(repeat-x),并在整个页面上重复另一个图像(重复),整个页面上的一个重复在顶部重复 .

我发现通过设置html和body的背景,我可以达到两个背景图像的效果:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

这是“好”的CSS吗?有更好的方法吗?如果我想要三个或更多背景图像怎么办?

8 回答

  • 373

    CSS3允许这种事情,它看起来像这样:

    body {
        background-image: url(images/bgtop.png), url(images/bg.png);
        background-repeat: repeat-x, repeat;
    }
    

    The current versions of all the major browsers now support it,但是如果您需要支持IE8或更低版本,那么解决它的最佳方法是增加额外的div:

    <body>
        <div id="bgTopDiv">
            content here
        </div>
    </body>
    
    body{
        background-image: url(images/bg.png);
    }
    #bgTopDiv{
        background-image: url(images/bgTop.png);
        background-repeat: repeat-x;
    }
    
  • 4

    我发现在一个div中使用两个不同背景图像的最简单方法是使用以下代码行:

    body {
        background:url(image1.png) repeat-x, url(image2.png) repeat;
    }
    

    显然,这不仅仅是网站的主体,你可以使用它为你想要的任何div .

    希望有所帮助!如果有人需要进一步的指示或帮助,我的博客上有一篇帖子可以更深入地讨论这个问题 - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .

  • 32

    用这个

    body {
    background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
    background-repeat: no-repeat, repeat-x, repeat-y;
    background-position:10px 20px , 20px 30px ,15px 25px;
    }
    

    使用background-position调整每个图像位置的简单方法:并使用background-repeat:为每个图像单独设置repeat属性

  • 4

    当前版本的FF和IE以及其他一些浏览器在单个CSS2声明中支持多个背景图像 . 看这里http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/和这里http://www.quirksmode.org/css/multiple_backgrounds.html和这里http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

    对于IE,您可以考虑添加行为 . 看这里:http://css3pie.com/

  • 13

    是的,它是可能的,并且已经由流行的可用性测试网站Silverback实现 . 如果查看源代码,您可以看到背景由多个图像组成,彼此叠加 .

    这篇文章演示如何在Vitamin上找到效果 . 包装这些'onion skin'层的类似概念可以在A List Apart上找到 .

  • 1

    如果您想要多个背景图像但不希望它们重叠,您可以使用此CSS:

    body {
      font-size: 13px;
      font-family:Century Gothic, Helvetica, sans-serif;
      color: #333;
      text-align: center;
      margin:0px;
      padding: 25px;
    }
    
    #topshadow {
      height: 62px
      width:1030px;
      margin: -62px
      background-image: url(images/top-shadow.png);
    }
    
    #pageborders {
    width:1030px;
    min-height:100%;
    margin:auto;        
        background:url(images/mid-shadow.png);
    }
    
    #bottomshadow {
        margin:0px;
    height:66px;
    width:1030px;
    background:url(images/bottom-shadow.png);
    }
    
    #page {
      text-align: left;
      margin:62px, 0px, 20px;
      background-color: white;
      margin:auto;
      padding:0px;
      width:1000px;
    }
    

    使用此HTML结构:

    <body 
    
    <?php body_class(); ?>>
    
      <div id="topshadow">
      </div>
    
      <div id="pageborders">
    
        <div id="page">
        </div>
      </div>
    </body>
    
  • 2
    #example1 {
        background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
        padding: 15px;
        background-size: 150px, 130px, auto;
    background-position: 50px 30px, 430px 30px, 130px 130px;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    
    </body>
    </html>
    

    我们可以使用CSS3轻松添加多个图像 . 我们可以在这里详细阅读http://www.w3schools.com/css/css3_backgrounds.asp

  • 22

    您可以为顶部创建一个div,一个背景,另一个用于主页面,并在页面内容之间分隔页面内容或将内容放在另一个z级别的浮动div中 . 你这样做的方式可能有用,但我怀疑它会在你遇到的每个浏览器上都有效 .

相关问题