我有一个我的网站的背景图片,当我在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>
有我正在使用的脚本.
acS*_*ter 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文档是相同的文件夹为"Background copy.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