css背景颜色分层
Recently my Fullscreen HTML5 Background Video article has received a number of questions about how to achieve a “scrolling fullscreen video” effect: video that appears behind content, but which scrolls upwards with the rest of the page.
最近，我的全屏HTML5背景视频文章收到了有关如何实现“滚动全屏视频”效果的许多问题：视频出现在内容后面，但随页面其余部分向上滚动。
This surprised me a little, since the solution is a fairly straightforward use of CSS positioning combined with the styles typically used for fluid images… but sharing the solution does provide me with the opportunity to include a neat use of blend modes, so here goes.
这让我有些惊讶，因为该解决方案非常简单地使用了CSS定位，并结合了通常用于流体图像的样式……但是共享该解决方案确实为我提供了包含巧妙使用混合模式的机会，因此，请继续。
基本HTML5视频滚动 (Basic HTML5 Video Scroll)
The markup starts up rather like my background video example, but rather than placing the HTML5 video in the root of the page (i.e. immediately after the opening <body> tag) it goes inside whatever contains your main content. For the purpose of this example, I’ll assume that the video is inside a <header> element at the start of a <main> tag:
标记的启动类似于我的背景视频示例 ，但不是将HTML5视频放置在页面的根目录中(即，紧接着在<body>标记之后)，而是放在包含您的主要内容的内容里面。 出于本示例的目的，我假设视频在<main>标记的开头位于<header>元素内：
<main>
<header>
<video autoplay loop>
<source src="forest-fire.webm">
<source src="forest-fire.mp4">
</video>
</header>The video you use should still follow the general rules for background video I shared in the original article.
The video is styled in exactly the same way as full-width responsive images are:
视频的样式与全角响应图像的样式完全相同：
main {
width: 80%;
max-width: 750px;
margin: 0 auto;
}
main > header video {
width: 100%;
height: auto;
}If you wanted the video to appear more “fullscreen”, simply modify the width and max-width values for the main element to expand it.
如果您希望视频看起来更“全屏”，只需修改main元素的width和max-width值以将其扩展。
In this case the video is layered with a heading and a prompt to read the associated story. These elements go immediately after the <video> tag, inside the <header>:
在这种情况下，视频会分层显示标题和提示以阅读相关故事。 这些元素位于<header>内部<video>标记之后：
<h1>A world Aflame</h1>
<a href="#maincontent">▼</a>
</header>The anchor link jumps to an element with an id of maincontent, immediately underneath the <header> element. Next, the <header> has to be adjusted with CSS to allow these new added elements to be layered and positioned:
锚链接跳到<header>元素正下方的id为maincontent元素。 接下来，必须使用CSS调整<header> ，以允许对这些新添加的元素进行分层和定位 ：
main > header {
position: relative;
}The CSS for the <h1> and the link:
<h1>CSS和链接：
main > header h1 {
position: absolute;
bottom: 40%;
left: 1rem;
font-size: 4rem;
text-transform: uppercase;
mix-blend-mode: overlay;
}
main > header a {
display: block;
text-decoration: none;
font-size: 2rem;
color: #fff;
opacity: .5;
position: absolute;
bottom: 1.5rem;
width: 100%;
text-align: center;
transition: .3s;
animation: downwardprompt 2s 1s;
}
main > header a:hover {
opacity: 1;
}The downwards arrow enters a brief animation a few seconds after the page loads, prompting the user to scroll:
向下箭头会在页面加载几秒钟后输入简短的动画 ，提示用户滚动：
@keyframes downwardprompt {
to {
transform: translateY(2rem);
opacity: 0;
}
}That’s it! Naturally, there are many variations of this technique, but the basic CSS should always be pretty much the same to achieve this effect.
而已！ 自然，这种技术有很多变体，但是基本CSS应该总是几乎相同才能达到这种效果。
翻译自: https://thenewcode.com/16/Scrolling-Background-Video-with-Layered-Content
css背景颜色分层
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
