Question

上下移动页面时，背景图像没有滚动。我需要在上下移动页面时滚动图像。

<div  class=" vc_custom_1543236867694 ">    
    <div class="wrapper">
        <h4 class="headingMargin45"><span class="successful">Successful</span> <span class="s_span_p"><strong>Story</strong></span><i>&nbsp;</i></h4>
    </div>  
        <div class="simple-text">
                    "Just have to say a very caring dentist who excels in reassuring their patients and gives excellent service, explains what they are doing every step of the way. The best dentist I have ever seen."    
        </div>
 </div>

我为滚动而写，但是没有用。这是css的代码

.vc_custom_1543236867694{
background-size: initial;
background-attachment: scroll;
background-position: 50% 0 !important;
animation: bg-slides 50s linear infinite;   
}
@-moz-keyframes bg-slides{
from { transform: translateX(0); }
to { transform: translateY(-5%); }
 }
 @-webkit-keyframes bg-slides {
from { transform: translateX(0); }
to { transform: translateY(-5%); }
}

@-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateY(-5%); }
}
@-moz-keyframes bg-slide{
from { transform: translateX(0); }
to { transform: translateY(-5%); }
}
.vc_custom_1542787903073{
background-size: initial;
background-attachment: scroll;
background-position: 50% 0 !important;
animation: bg-slide 50s linear infinite;
}

Answer 1

我不确定这是否是您需要实现的目标，但似乎是Parallax的效果！

这是一个简单的例子：

body {
  height: 600px
}
section {
  width: 500px;
  margin: 50px auto;
  background-image: url("https://cdn.pixabay.com/photo/2018/11/22/23/57/london-3833039_960_720.jpg");
  background-size: cover;
  background-attachment: fixed;
}
section .content {
  padding: 50px;
  color: #fff;
}

<section>
  <div class="content">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text</div>
</section>

如果不是您要的内容，请尝试进一步阐明您的问题！：）

Answer 2

要使图像固定在页面上并滚动，请使用以下内容：

background-attachment: fixed;

背景图像上下滚动是否有问题？

2 个答案: