【问题标题】:Multiple Background Images css not woking for me多个背景图像 css 不适合我
【发布时间】:2013-03-08 15:46:02
【问题描述】:

我想创建多个背景图像,但由于某种原因它不适合我。我在网上搜索并在 youtube 上观看了一些教程视频。我一步一步地按照教程说明进行操作,但我不知道为什么它对我不起作用。

我正在使用 Dreamweaver CS6。

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
<style type="text/css">
body
{ background: url(images/navi-bg.png) repeat-x 0 85px, url(images/gplaypattern.png) repeat;

}
</style>
</head>
<body>
</body>
</html>

这里是图片的链接:

我希望第一张图片有 backgound-repeat: repeat-x backgound-positon (x): 0 backgound-position (y)85px

第二张图片应该重复

【问题讨论】:

  • 您使用的是哪个浏览器?因为并非所有人都支持多个背景
  • 你的body有没有内容,height或者width

标签: css background


【解决方案1】:

这是您缺少 html 和 head 标签并且忘记关闭 doctype 的解决方案

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 body
 { background: url(http://i48.tinypic.com/23vyd6g.png) repeat-x 0 85px, url(http://i46.tinypic.com/oucxky.png) repeat;

 }
 </style>
 </head>

 <body>
 </body>
 </html>

【讨论】:

    【解决方案2】:

    想法是这样的,用这个改变你的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
    body {
        background-image: url(images/navi-bg.png), url(images/gplaypattern.png);
        background-repeat: no-repeat, no-repeat;
        background-color: transparent, transparent;
    }
    </style>
     </head>
    
     <body>
    </body>
    </html>
    

    【讨论】:

      【解决方案3】:

      看看这个 jsFiddle 链接 - http://jsfiddle.net/nFPLN/

      <style type="text/css">
          body { 
              background: url('http://oi48.tinypic.com/23vyd6g.jpg'),
              url('http://oi46.tinypic.com/oucxky.jpg');
              background-repeat: repeat-x, repeat;
          }
      </style>
      

      【讨论】:

        猜你喜欢
        • 2012-06-02
        • 2018-04-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-04-04
        • 1970-01-01
        相关资源
        最近更新 更多