Safari: фоновое изображение не отображается - PullRequest
0 голосов
/ 26 сентября 2018

Этот код работает нормально, используя Chrome, IE, Opera, но не использует Safari.Я не знаю почему.Я пытался подписаться на некоторые темы, но ни одна из них не помогла мне показать фоновое изображение этого раздела.Теперь я думаю, может быть, есть подходящий код фоновых изображений для Safari?

Это тема, на которую я подписан: Фоновое изображение не отображается в 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;
   }

1 Ответ

0 голосов
/ 26 сентября 2018

Вы определяете размер фона и положение в отдельных строках в своем правиле 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>



 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...