Question

我在我的网站上只使用HTML / CSS进行视差效果，它适用于所有浏览器，除了IE7 / 8我只是显示正常图像，这样用户看不到可怕的白色间隙。只是想知道是否有一种解决方法可以在移动设备/ iPad等上查看视差效果？或者我可以设置默认图像，就像我为IE7 + 8做的那样

我拥有的视差效果的fiddle示例。

<!--[if lte IE 7]>
    <div id="ie7_christmas_parallax">
        <img src="xmas/ie7_ie8.jpg">
    </div>
    <![endif]-->   <!--[if IE 8]>
    <div id="ie7_christmas_parallax">
        <img src="xmas/ie7_ie8.jpg">
    </div>
    <![endif]-->
<h1>My Page</h1>
<h2>Flowers, Flowers, Flowers </h2>

    <div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>

<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>

#slide4 {background-image: url("http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg");
-webkit-background-size: contain;
float: left;
margin-top:20px;
height: 450px;}

.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;
}

Answer 1

您可以根据屏幕宽度使用媒体查询来更改css 通常，手机的宽度为320到768，所以：

@media (max-width: 768px) {
 // your css code here
}

移动设备/ iPad的视差效应？

1 个答案: