Question

使用Chrome，IE，Opera而不是使用Safari，此代码可以正常工作。我不知道为什么我尝试遵循一些主题，但是没有一个主题可以帮助我显示此部分的背景图片。现在我在想，也许有适合Safari的背景图片代码？

这是我关注的话题：Background image not showing in Safari但不为我工作

<section id="video" class="parallax-section">
 <div class="overlay"></div>
<div class="container">
  <div class="row">

      <div class="col-md-offset-2 col-md-8 col-sm-12">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=kxloC1MKTpg"><i class="fa fa-play"></i></a>
          <h2 class="wow fadeInUp" data-wow-delay="0.5s">WATCH WORKOUT TUTORIAL</h2>
          <p class="wow fadeInUp" data-wow-delay="0.8s">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
      </div>

  </div>
</div>

CSS：

  #video {
  background: url("images/sample.png") 50% 0 repeat-y fixed;
  -webkit-background-size: cover;
   background-size: cover;
   background-position: center center;
   position: relative;
   color: #999;
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
   }
   #video .overlay {
   background: rgba(03,03,03,0.6);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   }

Answer 1

您要在CSS规则的不同行中定义背景大小和位置，这与第一行background定义中的背景和位置相矛盾。因此，请从第一行的background参数中删除相应的设置，例如background: url("images/sample.png")：

 #video {
  background: url("http://placehold.it/300x150");
  -webkit-background-size: cover;
   background-size: cover;
   background-position: center center;
   position: relative;
   color: #999;
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
   }
   #video .overlay {
   background: rgba(03,03,03,0.6);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   }

<section id="video" class="parallax-section">
 <div class="overlay"></div>
<div class="container">
  <div class="row">

      <div class="col-md-offset-2 col-md-8 col-sm-12">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=kxloC1MKTpg"><i class="fa fa-play"></i></a>
          <h2 class="wow fadeInUp" data-wow-delay="0.5s">WATCH WORKOUT TUTORIAL</h2>
          <p class="wow fadeInUp" data-wow-delay="0.8s">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
      </div>

  </div>
</div>

Safari：背景图片未显示

1 个答案: