Question

请告知需要进行哪些修正以避免覆盖各个部分背景（固定）的身体背景（动画云）。

对于透视图，我也在前端构建器模式下共享代码，它可以很好地工作。

感谢。

<html>
<body class=" cms-index-index fullwidth cms-home">

<div class="bg-grad"><div class="clouds"><div class="cloud x1"></div></div></div>

<section class=" parallax" style="background-image: url('http://localhost/../Wallpapers.jpg'); padding-top:25px; padding-bottom:25px;" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6">

<section class=" " style=" padding-top:50px; padding-bottom:50px;" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6">

</section>

</body>

前端构建器模式中的示例部分

<section class="builder-container section-builder sort-item " style="background-color: #ffffff;" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6" id="block_7">

CSS（用于动画云背景）

/*  BG Gradients
~-----------------------------------------*/
.bg-grad .parallax{
  background: #000;
  background: transparent url("http://localhost/../beauty.jpg") center 

bottom no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.bg-grad .bg-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 6;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.bg-grad .bg-layer.on {
  opacity: 1;
}

/*  Clouds
~-----------------------------------------*/
.cloud {
  width: 100%;
  height: 900px;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background: transparent url('http://localhost/../clouds2.png') left 

bottom no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@media (max-width: 550px) {
  .cloud {
    display: none;
  }
}

.x1 {
  -moz-animation: moveclouds 40s linear infinite;
  -webkit-animation: moveclouds 40s linear infinite;
  animation: moveclouds 40s linear infinite;
  width: 2036px;
  height: 1608px;
}

@-webkit-keyframes moveclouds {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -1400px;
  }
}
@-moz-keyframes moveclouds {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -1400px;
  }
}
@-o-keyframes moveclouds {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -1400px;
  }
}

Answer 1

<html>
<body class=" cms-index-index fullwidth cms-home">

<div class="bg-grad"><div class="clouds"><div class="cloud x1"></div></div></div>

<section class=" parallax" style="background-image: url('http://localhost/../Wallpapers.jpg'); padding-top:25px; padding-bottom:25px;" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6" style="position: relative;">

<section class=" " style=" padding-top:50px; padding-bottom:50px;" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6" style="position: relative;">

</section>

</body>

正文和剖面背景CSS3

1 个答案: