背景圖像消失與背景附件固定屬性

Question

我想建立一個旋轉木馬，從一張幻燈片到下一個典型的幻燈片動畫。然而，每張幻燈片中都有一個圖像，它將比幻燈片寬度寬得多，並且圖像將在幻燈片更改爲下一張幻燈片之前進行平移處理。所以順序是幻燈片>平移圖像>下一張幻燈片>平移圖像，等等。圖像需要一些不尋常的複雜性，因爲它必須有一個模糊的頁腳。我發現這樣做的唯一途徑可以看到在下面codpen：

http://codepen.io/aaronbalthaser/pen/XKmQrG

通知我定身彎曲並集中用於開發目的的元素。接下來，我創建了將成爲實際輪播的元素，並將上面的codpen添加爲子元素。一切都看起來不錯，可在未來codepen可以看出：

http://codepen.io/aaronbalthaser/pen/WxQWbM

問題是Flex屬性添加到body標籤是僅用於開發。一旦我刪除這些屬性，圖像消失。這可以通過刪除第二個codepen中的這些屬性來看到。此外，一旦刪除這些屬性，您可以刪除在後臺簡寫中找到的固定屬性，並再次出現。但是這個屬性是需要得到模糊效果的工作。理想情況下，我需要以下代碼才能工作。

HTML標記：

CSS：

.add-size { 
    width: 300px; 
    height: 250px; 
    border: 1px solid red; 
    position: relative; 
    overflow: hidden; 
} 

.carousel { 
    width: 600px; 
    height: 250px; 
    display: block; 
    position: absolute; 
} 

.item, 
.pan { 
    width: 300px; 
    height: 250px; 
    display: block; 
    float: left; 
    overflow: hidden; 

    position: relative; 
} 

.container { 
    width: 400px; 
    height: 300px; 
    position: absolute; 

    bottom: 0; 
} 

.inner { 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

.image { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed; 
    background-size: fill; 
} 

.image:before { 
    left: -5%; 
    right: -5%; 
    bottom: -5%; 
    content: "text"; 
    position: absolute; 
    height: 26%; 
    width: 110%; 
    background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed; 
    background-size: fill; 
    -webkit-filter: blur(8px); 
    filter: blur(8px); 
} 

任何援助將是真棒。謝謝。

Answer 1

使用固定的background-attachment屬性設置爲fixed，將其設置爲視口的位置。你不應該使用固定的。放下它，只使用背景大小：封面而不是填充。

.image { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi); 
    background-size: cover; 
}