老师请检查

来源:2-6 编程练习

Aurora_Meteor

2020-04-27 14:28:20

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <title>Document</title>

    <link rel="stylesheet" href="js/js/swiper/idangerous.swiper2.7.6.css">

    <link rel="stylesheet" href="js/js/swiper/idangerous.swiper.3dflow.css">

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide bg-1">1</div>

            <div class="swiper-slide bg-2">2</div>

            <div class="swiper-slide bg-3">3</div>

        </div>

    </div>


    <script src="js/js/swiper/idangerous.swiper2.7.6.min.js"></script>

    <script src="js/js/swiper/idangerous.swiper.3dflow.js"></script>

    <script src="js/js/index.js"></script>

</body>

</html>

    

index.css

@charset "utf-8";


* {

    margin: 0;

    left: 0;

}


html,

body {

    width: 100%;

    height: 100%;

}


.swiper-container {

    width: 100%;

    height: 100%;

}


.swiper-wrapper {

    width: 100%;

    height: 100%;

}


.swiper-slide {

    width: 100%;

    height: 100%;

}


.bg-1 {

    background: url('http://climg.mukewang.com/59f2f3c60001e51206000600.jpg');

}


.bg-2 {

    background: url('http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg');

}


.bg-3 {

    background: url('http://climg.mukewang.com/59f2f3fb0001725305000707.jpg');

}

index.js

var mySwiper = new Swiper('.swiper-container', {

  //其他设置

  tdFlow: {

    rotata: 60,

    stretch: 40,

    depth: 100,

    shadows:true

  }


});


写回答

2回答

好帮手慕慕子

2020-04-27

同学你好, 如果放在前面设置图片尺寸等属性,复合属性background,会覆盖前面的background-repeat等单独写的属性,所以需要放在后面才可以。

祝学习愉快~

0

好帮手慕慕子

2020-04-27

同学你好,效果实现是正确的。但,如下所示,背景图片重复显示了,效果不美观

http://img.mukewang.com/climg/5ea68eb9097ac59008300794.jpg

建议优化:将swiper-slide类设置放在后面,设置背景图片不重复,大小为百分百显示

http://img.mukewang.com/climg/5ea68f6f09eedccf19080966.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0
hurora_Meteor
h 为什么只有把swiper-slide类设置放在后面尺寸才能生效呢?是因为即使前面设置了背景尺寸,后面给它们单独设置了背景图片会重置所有和背景图片有关的属性吗?
h020-04-27
共1条回复

0 学习 · 6815 问题

查看课程