Hintergrundbild verschwindet mit Hintergrundanhang behobene Eigenschaft

Question

Ich versuche, ein Karussell zu bauen, das eine typische Diaanimation von einer Folie zur nächsten hat. Auf jeder Folie befindet sich jedoch ein Bild, das viel breiter ist als die Folienbreite, und das Bild wird animiert, bevor das Karussell zur nächsten Folie wechselt. Die Reihenfolge ist also Folie> Bild verschieben> nächste Folie> Bild schwenken, und so weiter. Das Bild erfordert eine ungewöhnliche Komplexität, da es eine verschwommene Fußzeile haben muss. Der einzige Weg, fand ich, dies zu tun kann in folgenden codpen zu sehen:

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

Hinweis habe ich den Körper zu biegen und zentriert um die Elemente für dev Zwecke. Als nächstes habe ich die Elemente erstellt, die das eigentliche Karussell sein würden, und ich habe die obigen Codpen als Kindelemente hinzugefügt. Alles sieht gut aus, die in den nächsten codepen zu sehen ist:

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

Das Problem ist, die Biegeeigenschaften, um den Körper Tag hinzugefügt wurden nur für die Entwicklung. Sobald ich diese Eigenschaften entferne, verschwindet das Bild. Dies kann durch Löschen dieser Eigenschaften im zweiten Codepen angezeigt werden. Nachdem Sie diese Eigenschaften gelöscht haben, können Sie außerdem die in der Hintergrundkurzschrift gefundene feste Eigenschaft entfernen und sie wird erneut angezeigt. Aber diese Eigenschaft wird benötigt, um die Arbeit unscharf zu machen. Idealerweise benötige ich den folgenden Code zum Arbeiten.

HTML-Markup:

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

Jede Hilfe wäre genial. Vielen Dank.

Answer 1

Wenn Sie die fixed-Eigenschaft background-attachment auf fixed setzen, wird sie auf die Position des Ansichtsfensters gesetzt. Sie sollten nicht fixed verwenden. Lass es fallen und benutze einfach background-size: cover statt fill.

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