Question

我正在尝试构建一个具有从一张幻灯片到另一张幻灯片的典型幻灯片动画的轮播。但是，每个幻灯片中都有一个图像，该图像比幻灯片宽度宽得多，并且图像将在轮播更改为下一张幻灯片之前平移动画。所以订单是幻灯片＆gt;平移图像＆gt;下一张幻灯片＆gt;平移图像，等等。图像需要一些不寻常的复杂性，因为它必须有一个模糊的页脚。我发现这样做的唯一方法可以在下面的代码中看到：

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

注意我将主体设置为flex并将元素居中以用于开发目的。接下来，我创建了将成为实际轮播的元素，并将上面的codpen添加为子元素。一切看起来都很棒，可以在下一个代码中看到：

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

问题是添加到body标签的flex属性仅用于开发。删除这些属性后，图像就会消失。通过在第二个codepen中删除这些属性可以看出这一点。此外，删除这些属性后，您可以删除后台速记中找到的固定属性，然后再次显示。但是这个属性需要得到模糊效果的工作。理想情况下，我需要以下代码才能工作。

HTML标记：

<div class="add-size">
  <div class="carousel">

    <div class="item">
      <div class="pan">

        <div class="container"> <!-- animation element -->
           <div class="inner">

              <div class="image"></div>

           </div>
        </div>

      </div>
    </div>

    <div class="item">
      <div class="pan">

        <div class="container"> <!-- animation element -->

          <div class="inner">

            <div class="image"></div>

          </div>

        </div>

      </div>
   </div>

  </div>
</div>

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，将其设置为viewport的位置。你不应该使用固定的。放下它，只使用background-size：cover而不是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;
}

背景图像随背景附件固定属性

1 个答案: