0

我有一个固定在顶部的标题，然后内容只是在下面滚动。所以为了防止通过这个标题显示内容，我有一个与主体相同的背景图像，这是固定的。

一切都很好，但在 chrome 中，当我向上滚动内容并且 youtube 视频在此下方时，它会导致标题包含背景向左对齐并缩小，然后你越往上移动它就会消失，这显示了里面的内容该网站，这不是我想要的方式。

关于如何防止这种情况发生的任何想法：

下面的一些代码：

 header{
   width:960px;
   position: fixed;
   top: 0px;
   margin:0 auto;
   padding:0;
   text-align:center;
   display: block;
   background: url('../imgs/Background_header.jpg') no-repeat top left fixed;
  }

内容容器 css

  .content-container {
   width:960px;
   padding-top:230px;
   z-index:0;
   margin:auto;
   overflow: hidden;
  }

的HTML：

   <div class="content-container">
    <header>
 <!-- header stuff -->          
    </header>
    <iframe width="560" height="315" src="......
    .. other stuff.

任何想法都将不胜感激，如果有更好的方法来制作它，那么它也会很棒。

谢谢

编辑：如果不清楚，内容会在标题下方滚动，当它到达 youtube 播放器时，这就是标题背景图像搞砸的时候。

4

3 回答 3

1

这可以通过向YouTube URL添加wmode opaque 或 transparent来解决。

前任 嵌入这个视频：http: //youtu.be/qgnvbMwRaf8，你得到的 iframe 是

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8" frameborder="0" allowfullscreen></iframe>

第一个参数可以在前面添加一个问号。因此，要将 wmode 添加到 URL，您可以更改 src，如下所示：

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?wmode=opaque" frameborder="0" allowfullscreen></iframe>

如果 URL 已经有一个参数，您可以添加第二个参数，前面有一个 & 符号，但最好是 html ( &amp;) f.ex。

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?embedded=true&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

注意：wmode=opaque 和 mode=transparent 比 wmode=window 慢。wmode=transparent 比 wmode=opaque 慢。- wmode - 在浏览器的渲染行为中是什么意思？

有关 YouTube 参数的更多信息，请参见此处。

于 2014-03-06T05:24:21.197 回答
0

从标题背景中删除“固定”。

尝试“背景：url（'../imgs/Background_header.jpg'）无重复左上角；”。真的不知道为什么，但它对我有用。

于 2013-03-15T08:39:31.533 回答
0

西蒙，欧盟是否尝试过将 iframe 放置在：

position: absolute;
z-index: 9999;

再来一注。Z-INDEX 仅适用于定义了位置的元素。（相对的，绝对的，不胜枚举）。

希望我能帮助你。

于 2012-08-09T18:04:54.460 回答