3

我有这个 CSS：

body
{
    background-position: center top;
    background-color: rgb(237, 237, 237);
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0px auto;
    padding: 0;
    color: #696969;
    width: 1000px;
    height: 1200px;
    background-image: url('Background.png');
    background-repeat: no-repeat;
    background-attachment: inherit;    
    top: 0px;
}

当我最大化窗口时一切正常，但是当我缩小窗口时，背景图像会移动。

这是最大化浏览器窗口的外观

这是在更改窗口大小之后

4

3 回答 3

0

您从人们那里得到的大多数答案都需要 IE9+（因为它是 CSS3）。但是，如果您希望用户也使用旧版浏览器（我在这里是实用且安全的），我认为您需要这样做的方式是使用 jQuery/JavaScript。过去我在 CSS3 中做过类似的事情，但后来我意识到大多数公司/公司仍然使用 IE8，最好的方法是使用 JavaScript。

这里有一些例子：

  1. http://buildinternet.com/project/supersized/slideshow/3.2/demo.html （这是一个很好的例子）
  2. http://designshack.net/?p=13616
  3. http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
于 2012-06-25T19:34:38.043 回答
0

尝试这个：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:fixed;
于 2012-06-25T19:04:06.180 回答
0

首先，尝试将您的 CSS 属性组合在一起，例如：

body {
width: 1000px;
height: 1200px;
background: #EDEDED url('Background.png') center top inherit no-repeat;
top: 0;
margin: 0 auto;
padding: 0;
font: .85em "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
color: #696969;
}

您能否也为该问题提供一个 jsFiddle，以便我们可以看到完整的代码或页面链接？

http://jsfiddle.net/

谢谢

于 2012-06-25T19:15:11.273 回答