我正在开发一个新网站,我想固定背景图片,以便将来应用视差。
这是我的html代码
<div class="parallax image1"></div>
这是我的CSS
.parallax {
height: 10em;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover top: 0;
left: 0;
z-index: -1;
}
.image1 {
background-image: url("https://d2wq73xazpk036.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/A7BC70EF-2E93-47DA-A355C4B22039324E/thul-6818f8f2-2711-5159-9648-cc23606b037c.jpg");
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure sse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="parallax image1"></div>
<p>Lorem ipsum dolor sit amet, aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
在 Chrome 58、Microsoft Edge、Internet Explorer、Opera 和 Safari 上一切正常。该图像不会在 Firefox 上显示。有正确的高度,但没有图像。
提前致谢!
编辑:添加这个不起作用。
html {
background-attachment: fixed;}
最佳答案
我不知道这是否可以帮助你,但我用它作为我网站的背景:
.image1 {
background: url(yourimage.jpg) background: url(http://wallpapercave.com/wp/7cDOsrQ.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0px;
padding:0px;}
这是用于全尺寸背景,但在 html 中你需要设置它`
<div class="image1"></div>
关于html - 背景图像:固定适用于除 Firefox 以外的任何地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44043060/