html - SASS -scss 背景图像链接

Question

我尝试使用 sass 为元素创建一个全屏图像 slider slider 应该出现在移动版本中在屏幕的一半:

html 是这样的:

        <div id="slideShow"class="wrap">
            <div id="arrow-left" class="arrow"></div>
            <div id="slider">
                <div class="slide slide1">
                    <div class="slide-content" >
                        <span>Image One</span>
                    </div>
                </div>
                <div class="slide slide2">
                    <div class="slide-content">
                        <span>Image Two</span>
                    </div>
                </div>
                <div class="slide slide3">
                    <div class="slide-content">
                        <span>Image Three</span>
                    </div>
                </div>
                <div class="slide slide4">
                    <div class="slide-content">
                        <span>Image Four</span>
                    </div>
                </div>
            </div>
            <div id="arrow-right" class="arrow"></div>
        </div>

我的 scss 文件看起来像这样:

#background{


    .wrap{
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;

        .slide{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: none;

            .slide1{background-image: url('../../img/photo/32205901_10216113101158488_4707111253917564928_n.jpg')}
            .slide2{background-image: url('../../img/photo/27748300_10213965746245449_4810004832094893115_o.jpg')}
            .slide3{background-image: url('../../img/photo/23905655_10155338212644615_4950099036934162252_n.jpg')}
        }
    }

但是图片没有加载我不知道为什么如果有人有更好的方法来做到这一点非常感谢

Answer 1

slide1 不是 slide 的子级，因此移动关闭 } 以关闭 slide{} 然后设置 .slide1..

See working code

.wrap{
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;

   .slide{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: none;
      } /* close here the .slide then style silde1\2\3 */
            .slide1{background-image: url('/image/3mG2d.jpg')}
            .slide2{background-image: url('/image/3mG2d.jpg')}
            .slide3{background-image: url('/image/3mG2d.jpg')}
 }