html - 我的横幅部分没有显示在我的静态 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 -->
解决方案
不确定实际的错误,但我怀疑它是你的第一个.pogoSlider-slide
元素,它有一个background-image:url(/public/images/home1.jpg)
我认为你不需要它的网址,/
所以background-image:url(public/images/home1.jpg)
推荐阅读
- javascript - 如果变量在 Jquery 中包含特殊字符,我该如何设置值
- centos - 如何在 CentOS 上禁用 Nouveau 内核驱动程序
- powershell - Azure DevOps Release Pipeline Inline Powershell 脚本无法运行 python unittest 套件
- .net - 无法使用 ngrok 远程调试已部署的 microsoft bot
- java - 如何在Java中调用给定特定参数类的不同方法
- ios - 从框架中的协议中抑制变量名称长度
- javascript - 从 React.js 组件到 Node.js 服务器的 POST 请求出现问题
- javascript - 'to.include' 在'to.eventually.equal' 工作的地方不起作用
- laravel - 如何将 Laravel 数组验证错误减少到单个消息
- java - 输入到 CriteriaQuery.from 方法时,我的实体类未被正确接受