Question

我注意到GIF在所有浏览器中都不兼容，所以我一直在使用电影。到目前为止一直在找工作。我有一个用css编写的背景图片的网站。我有一种感觉，这是行不通的，但我尝试将电影链接起来，就像我想要的图像一样，甚至没有显示出来。下面是html和css。

HTML

 <section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

根据我的理解，链接视频不会发生，那么另一种选择呢？我该怎么做？我需要现在的文字仍然出现，电影是不透明的。如果我需要使实际的电影本身不透明，我可以做到这一点。感谢

可以一起查看网站here

Answer 1

您可以查看如何添加视频Tutorial

编辑 ：编辑小提琴

＆＃13;

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});

＆＃13;

video {
  position: relative;
  z-index: -1;
}

#custom-message {
  position: absolute;
  color: rgb(230, 200, 200);
  z-index: 1;
}

#slider {
  background: url("../img/") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 10% 0%;
  padding: 200px 0 280px 0;
  position: relative;
}

#slider:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #8b86a3, #322e40);
  opacity: 0.8;
}

#slider .block {
  color: #E3E3E4;
}

#slider .block h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 45px;
  line-height: 60px;
  letter-spacing: 10px;
  padding-bottom: 45px;
}

#slider .block p {
  font-size: 23px;
  line-height: 40px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">

  <section id="slider">
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-2">
      <div id="container" align="center">
        <video width="640" height="320" autoplay>
          <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
        </video>
        <div id="custom-message">
          Need a Network?</div>
        <div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
        </div>
      </div>
    </div>
  </div>
</div>
  </section>

＆＃13;

Answer 2

您可以使用以下代码在“需要网络”部分后面添加视频：

我替换了视频，并使用JavaScript代码“自动播放”视频！

如果您认为视频无需JavaScript即可自动播放，请将其删除！
<小时/>   我还将iframe标记替换为video标记。


您可以通过更改src=""标记内<source>标记的<video>属性来替换视频。

function playVideo() {
document.getElementsByClassName('video')[0].play();
}

.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

<body onload="playVideo()">
<section id="slider">
  <video class="video" autoplay="autoplay">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  </video>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

CSS背景图片/电影网址？

2 个答案: