html - 在 Mozilla 浏览器上图像显示为空白
问题描述
出于某种原因,当我使用 Mozilla 时,我的图像只显示为白色,但在不同的浏览器上看起来很好,我试过 -moz 似乎无法让它工作。我知道这是一个基本的更改,但由于某种原因我找不到修复程序。希望有人可以提供帮助。
只是一个旁注它在页面加载时显示为空白,但是当我将鼠标悬停在图像上时它可以完美运行。
/*Projects Page CSS*/
.portfolio-item {
margin-bottom: 30px;
}
.card-title {
color: white !important;
}
.card-modal-header {
color: #F15632 !important;
text-shadow: 1px 1px 0px black !important;
}
.card-title:hover {
color: #F15632 !important;
text-shadow: 1px 1px 0px black !important;
}
.card-body {
background-color: #363636;
border-radius: 2px;
border: 1px solid #F15632;
border-top: hidden;
}
.card-img-top {
border: 1px solid #F15632;
border-bottom: hidden;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #F15632;
border-top: 1px solid #F15632;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
-moz-transform: scale(0, 1);
}
.overlay-header-color {
color: #F15632 !important;
text-shadow: 1px 1px 0px black !important;
}
.overlay-header-color-link {
color: #F15632 !important;
text-shadow: 1px 1px 0px black !important;
}
.overlay-header-color-link:hover {
text-decoration: underline !important;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-moz-transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
-moz-transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
-moz-filter: brightness(0.6);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-moz-transition: opacity 0.35s, -moz-transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
<div class="container-fluid">
<br/>
<div class="row">
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="kitchen" class="card">
<a href="#modal-project1" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/kitchen-black-white-2.jpg" alt="">
<a href="#modal-project1" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Kitchen Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project1" data-toggle="modal">Kitchen Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="bar" class="card ">
<a href="#modal-project2" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/bar-3.jpg" alt="">
<a href="#modal-project2" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Bar Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project2" data-toggle="modal">Bar Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="bathroom" class="card ">
<a href="#modal-project3" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/bathroom-black-2.jpg" alt="">
<a href="#modal-project3" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Bathroom Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project3" data-toggle="modal">Bathroom Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="closet" class="card ">
<a href="#modal-project4" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/closet-black-1.jpg" alt="">
<a href="#modal-project4" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Build in Closet Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project4" data-toggle="modal">Build in Closet Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="koi-pond" class="card ">
<a href="#modal-project5" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/koipond-bridge-2.jpg" alt="">
<a href="#modal-project5" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Koi Pond Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project5" data-toggle="modal">Koi Pond Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="painting" class="card ">
<a href="#modal-project6" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/painting-house-modern-4.jpg" alt="">
<a href="#modal-project6" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Painting Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project6" data-toggle="modal">Painting Projects</a>
</h4>
<!--<p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>-->
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="patio" class="card ">
<a href="#modal-project7" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/patio-pizza-7.jpg" alt="">
<a href="#modal-project7" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Patio Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project7" data-toggle="modal">Patio Projects</a>
</h4>
<!--<p class="text-muted card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>-->
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="renovation" class="card ">
<a href="#modal-project8" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/patio-open-plan-4.jpg" alt="">
<a href="#modal-project8" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Renovation Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project8" data-toggle="modal">Renovation Projects</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div id="add-renovation" class="card ">
<a href="#modal-project9" data-toggle="modal">
<div class="hovereffect">
<img class="card-img-top" src="projects-main/eldoradopark-13.jpg" alt="">
<a href="#modal-project9" data-toggle="modal">
<div class="overlay">
<h2 class="overlay-header-color">Additional Renovation Projects</h2>
</div>
</a>
</div>
</a>
<div class="card-body">
<h4 class="card-title">
<a class="card-title" href="#modal-project9" data-toggle="modal">Additional Renovation Projects</a>
</h4>
</div>
</div>
</div>
</div>
</div>
解决方案
好像您在本地遇到此问题,您是否尝试过远程访问另一台计算机:
在工具 > 页面信息 > 权限中检查当前选项卡中域的权限 检查图像是否已启用:工具 > 选项 > 内容:[X] 自动加载图像 在工具 > 选项 > 内容中检查例外情况:加载图像 > 例外检查阻止图像的“工具>页面信息>媒体”选项卡(使用光标向下键滚动浏览所有图像)。
这个 Mozilla 支持链接可以提供帮助
推荐阅读
- javascript - 需要帮助使网站可供公众使用
- python - 确保在执行命令之前将文件写入计算机
- javascript - 提出请求 req.body 为空
- java - 如何从多层多个子节点内的 Firebase 数据库中检索数据?
- ruby - 是否有一个函数可以在包含整数和字符串的数组中找到最大值索引?
- python - 一些 Python 对象未绑定到检查点值
- python - 从函数中获取数组而不调用该函数?
- c# - (Unity2D)如何让玩家根据精灵的颜色与平台进行交互?
- c++ - 使用 fstream 从 C++ 中的 .txt 文件获取文本的问题
- node.js - mongoose 无法找到 $geoNear 查询错误的索引