9

我的网站有一张背景图片，当我在 Html 中获取图片时，它会在页面上平铺并停在同一个地方。如何调整图像大小以填充窗口并向下滚动页面，以使文本和内容似乎在页面上向上移动？我已经在您的答案中使用了代码，并且图像显示并且没有平铺，但是它会向下重复页面而不是向下滚动？

<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
    background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed; 
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

这是我正在使用的脚本。

4

4 回答 4

10

*用 jsFiddle 更新：http: //jsfiddle.net/q5WKg/1/

要阻止背景重复，您可以在 CSS 中执行以下操作：

background-repeat:no-repeat;

要始终填充背景，请使用 css3 属性：

background-size: cover;

因为它没有被广泛实施，您可能需要使用供应商前缀：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

除了您的评论 - 完整的看起来像这样：

<style type="text/css">
html
{
    background-image: url('path/to/imagefile.jpg'); 
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
</style>

如果您的背景图片位于 html 元素上。

*更新 2

我会更正您上面的代码，将您的样式声明移到文档的头部（尽管您放置它的位置在大多数浏览器中都可以正常工作）并从 body 标记中删除有关背景图像的任何信息。

此外，您提供的 url 是计算机上文件的绝对路径 - 您确实需要使用相对路径，而不是依赖于您的计算机文件结构的路径，我假设 HTML 文档是相同的文件夹为“背景副本.jpg”。因此，您的代码应如下所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
    background: url('Background copy.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>

除了更新您的代码之外，我会将您使用的任何图像的名称全部更改为小写，并且在其文件名中不包含空格 - 这将为您省去很多麻烦……

如果您想更好地了解 HTML/CSS 的工作原理，以及如何正确构建它们，我会在 w3cschools 阅读，他们可以选择在很多页面上“自己尝试”，这意味着您可以看到代码应该如何使用 CSS 和 HTML 构建和测试不同的东西。

w3schools css 教程 - http://www.w3schools.com/css/default.asp

于 2013-06-10T10:27:01.777 回答
3

大概是这样的：

html { 
  background: url(images/your_file.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

对于 IE - 仅 IE9+，其他浏览器 - 应该可以工作。

更多信息在这里：http ://css-tricks.com/perfect-full-page-background-image/

PS你可能也对视差感兴趣。

于 2013-06-10T10:27:36.497 回答
1

为您的背景图像设置一些选项：

html,body{

    background-image: url('your/image/path');
    background-repeat: no-repeat;
    background-size: cover; // this fills up the complete page.
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

希望能帮助到你！

于 2013-06-10T10:28:19.343 回答
0

https://css-tricks.com/perfect-full-page-background-image/

在本网站的版本中，它运行良好。这是代码：

html { 
background: url("image.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
于 2018-05-28T21:16:03.097 回答