html - 背景图像:固定适用于除 Firefox 以外的任何地方

标签 html css firefox background-image fixed

我正在开发一个新网站,我想固定背景图片,以便将来应用视差。

这是我的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/

相关文章:

css - 将 CSS 文件应用于 JavaFX WebView

html - Fancybox 导致分屏布局滚动位置重置为顶部

firefox - 如何防止 NVDA 自动将焦点设置在最后使用的 HTML 元素上?

html - 在显示 block div 上垂直对齐

javascript - jQuery SlideToggle 正在添加空白

javascript - 是否可以动态插入对象参数的值?

css - 内联元素的 Firefox 分词

html - 如何使 div 表的列延伸到整个长度?

javascript - 居中的内联文本在淡入时重新定位

javascript - 您可以使用 JavaScript 检测 -moz-device-pixel-ratio 和 -o-device-pixel-ratio 的当前值吗?