Question

我有三个div，默认情况下有两个是隐藏的。单击按钮时，将显示相应的div。

我有三个不同的背景图像，三个div和＆amp;单击按钮，我也想要更改背景图像。然而，这在Safari＆amp; Chrome，但在Mozilla中运行良好。

什么无效

Safari和Safari中的背景图像保持不变Chrome，Mozilla的变化。

这是我的代码：

CSS

.banner_1{
        width:100%;
        background-image: -moz-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -moz-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner.jpg");
        background-image: -webkit-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -webkit-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner.jpg");
        background-image: -ms-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -ms-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner.jpg");
        background-image: linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner.jpg");
        background-attachment: fixed, fixed, fixed;
        background-position: center 100%, center 100%, center 100%;
        background-repeat: repeat, repeat, no-repeat;
        background-size: cover, cover, cover;

}

.banner_2{
        width:100%;
        background-image: -moz-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -moz-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner2.jpg");
        background-image: -webkit-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -webkit-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner2.jpg");
        background-image: -ms-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -ms-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner2.jpg");
        background-image: linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner2.jpg");
        background-attachment: fixed, fixed, fixed;
        background-position: center 100%, center 100%, center 100%;
        background-repeat: repeat, repeat, no-repeat;
        background-size: cover, cover, cover;
    }

.banner_3{
        width:100%;
        background-image: -moz-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -moz-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner3.jpg");
        background-image: -webkit-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -webkit-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner3.jpg");
        background-image: -ms-linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), -ms-linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner3.jpg");
        background-image: linear-gradient(top, rgba(160,167,232,0.25), rgba(86,153,158,0.35)), linear-gradient(top, rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../images/banner3.jpg");
        background-attachment: fixed, fixed, fixed;
        background-position: center 100%, center 100%, center 100%;
        background-repeat: repeat, repeat, no-repeat;
        background-size: cover, cover, cover;
    }

HTML

<section class='index_banner banner_1 show'>
    <div class='middle'>
        Hey
    </div>
</section>
<section class='index_banner banner_2 hide'>
    <div class='middle'>
        Hey
    </div>
</section>
<section class='index_banner banner_3 hide'>
    <div class='middle'>
        Hey
    </div>
</section>

JQUERY

<script>
    $(document).ready(function(){
        $('.one').click(function(){
            $('.banner_1').show();
            $('.banner_2').hide();
            $('.banner_3').hide();
        });
        $('.two').click(function(){
            $('.banner_1').hide();
            $('.banner_2').show();
            $('.banner_3').hide();
        });
    });

有人能说出为什么它不能在两个浏览器中运行吗？有什么办法可以让它发挥作用？

div中的背景图像不适用于Safari＆amp; Chrome，但适用于Mozilla

0 个答案: