html - 在 mozilla 浏览器上图像显示空白

Question

出于某种原因，当我使用 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>

Answer 1

看起来你在本地遇到了这个问题，你有没有试过远程到另一个人的电脑:

在“工具”>“页面信息”>“权限”中的当前选项卡中检查域的权限检查图像是否已启用:工具 > 选项 > 内容:[X] 自动加载图像在工具 > 选项 > 内容中检查异常(exception):加载图像 > 异常(exception)检查“工具 > 页面信息 > 媒体”选项卡中是否有被阻止的图像(使用光标向下键滚动浏览所有图像)。

此 mozilla 支持链接可以 help