无法在移动设备上获得线性背景



我使用的是带有线性梯度的视差背景,以使图像更暗一点。我可以在台式电脑上很好地使用它,但当我在移动设备(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/

感谢

让它工作起来了。。。只是使用了另一个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>

最新更新