Question

我正在一个新网站上工作，我希望修复背景图片，以便将来应用视差。

这是我的HTML代码

   <div class="parallax image1"></div>

这是我的css

＆＃13;

.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");
    }

＆＃13;

<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>

＆＃13;

Chrome 58，Microsoft Edge，Internet Explorer，Opera和Safari都能正常运行。该图像无法在Firefox上显示。正确的高度在那里，但不是图像。

提前致谢！

编辑：添加此功能无效。

html {
    background-attachment: fixed;}

Answer 1

我不知道这是否可以帮助您，但我将其用于我的网站背景：

.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>

背景图片：固定在除Firefox之外的任何地方

1 个答案: