首页 > 解决方案 > 我的横幅部分没有显示在我的静态 html 网站中,其余工作正常

问题描述

我正在尝试在 firebase 上托管我的静态网站,除了这个横幅代码之外,一切都运行良好。除了这些横幅图像之外,我网站的所有图像都工作得很好,并且都放在同一个文件夹中。如果有人可以提供帮助,我将不胜感激,非常感谢。

.pogoSlider{
    width:100%;
    height:874px!important;
    position:relative;
    overflow:hidden;
}
#column-left .pogoSlider,#column-right .pogoSlider,#content .pogoSlider{
    margin-bottom:20px;
}
.pogoSlider--banner .pogoSlider-slide{
    ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    opacity:1;
}

.pogoSlider-slide{
    width:100%;
    height:100%;
    position:absolute;
    background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -moz-background-size:100% 100%;
    -o-background-size:100% 100%;
    -ms-background-size:100% 100%;
    min-height:650px!important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    opacity:0;
    -webkit-perspective:1300px;
    perspective:1300px;
    overflow:hidden;
}
.pogoSlider-loading{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#eaeaea;
    z-index:11;
}
<div class="pogoSlider" id="js-main-slider">
    
    <div class="pogoSlider-slide " data-transition="verticalSlide" data-duration="1000"  style="background-image:url(/public/images/home1.jpg);">
        <div class="pogoSlider-slide-element">
        <h3><span>MOBLIE</span>  Finance</h3>
        </div>
    </div>
    <div class="pogoSlider-slide " data-transition="verticalSlide" data-duration="1000"  style="background-image:url(public/images/home2.jpg);">
        <div class="pogoSlider-slide-element">
        <h3><span>MOBLIE</span>  REPAIRING</h3>
        </div>
    </div>
    <div class="pogoSlider-slide " data-transition="verticalSlide" data-duration="1000"  style="background-image:url(public/images/home3.jpg);">
        <div class="pogoSlider-slide-element">
            <h3>WE <span>SELL</span> MOBILE ACCESSORIES</h3>
        </div>
    </div>
    <div class="pogoSlider-slide " data-transition="verticalSlide" data-duration="1000"  style="background-image:url(public/images/home4.jpg);">
        <div class="pogoSlider-slide-element">
            
            <h3>BEST <span>PRICE</span>. IN AREA</h3>
        </div>
    </div>
</div>
<!-- /banner section -->

标签: htmlcss

解决方案


不确定实际的错误,但我怀疑它是你的第一个.pogoSlider-slide元素,它有一个background-image:url(/public/images/home1.jpg)我认为你不需要它的网址,/所以background-image:url(public/images/home1.jpg)


推荐阅读