背景图像消失与背景附件固定属性

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