无法在移动设备上使用线性背景

Question

我正在使用具有线性渐变的视差背景来使图像更暗一些。我可以让它在台式机上运行良好，但是当我在移动设备上尝试时 (iPhone)，渐变不起作用，并且检查元素，我可以看到背景属性在那里。

<div class="fundo" id="planos" data-parallax="scroll" data-position-y="-100px" data-image-src="images/slider/1_dark.jpg">
<div class="mid-content">
         <div class="white banner-hospedagem">blah blah
          </br><span>Teste</span>
         </div>
         <h3 class="white subbanner-hospedagem">Teste 2</h3>
         <hr class="style-two" />
 </div>
 </div>

css

.fundo{
   background: -moz-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -webkit-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -webkit-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -o-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -ms-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   width: 100%;
   margin:0;
   padding-bottom: 70px;
}

知道为什么它不起作用吗？

我正在使用 jquery 视差 http://pixelcog.github.io/parallax.js/

谢谢

Answer 1

成功了...只是使用了另一个 div 而不是在同一个视差块上应用渐变效果。

<div id="planos"  data-parallax="scroll" data-position-y="-20px" data-image-src="images/back_3.jpg">
  <div class="fundo">
    <div class="mid-content">
       <div class="white banner-dominio"> Comece a dar vida </br> registrando  <span>blah</span>.

       </div>

       <h3 class="white subbanner-dominio"> <span><small>R$</small>sdasd</span> .com.br   <span>   <small>R$</small>asd</span> .com  </h3>

        </div>
    </div>
 </div>

无法在移动设备上使用线性背景

Can't get linear-background working on mobile devices

jquery

html

ios

css

parallax