如何在 HTML5 中模拟类似窗口的内容区域剪切 + CSS3
我有一个有趣的内容布局提案，但我很难弄清楚它是如何工作的。 在“内容框”容器内，我们希望能够对滚动出视图的元素进行动画处理（使用 jQuery），一旦它们触及内容框的边缘就隐藏起来，几乎就像内容框是一个窗口一样。
如果内容上方的徽标框附加到内容框（假设元素向上移动）并且完全不透明，那么这将是微不足道的，因为这样它的 z-index 可以设置得更高，并且向它进行动画处理的元素将在其下方滑动。显然，现在元素刚刚飞出内容框并显示在所有内容之上。
即使徽标框位于连接到内容框的另一个 div 内，它也需要具有与主体相同的背景图像，以便仍然显示透明并隐藏试图隐藏的元素。这显然是行不通的，因为用于包含徽标的 div 的图像和正文不会对齐。
因此，我们想要做的事情似乎不可行，但让我们听听您的建议。我们希望在这个项目中使用 HTML5 + CSS3。
I have an interesting content layout proposal but I'm having difficulty figuring out how it can work.
Inside the "content box" container, we want to be able to animate (using jQuery) elements being scrolled out of view, becoming hidden once they have touched the edge of the content box, almost as if the content box was a window.
This would be trivial if the Logo box above the content was attached to the content box (assuming elements are moving upward) and entirely opaque, because then its z-index could be set higher and elements that are animated towards it would slide under it. Obviously, right now the elements just fly out of the content box and are seen on top of everything.
Even if the Logo box was inside another div that was connected to the content box, it would need to have the same background image as the body in order to still appear transparent and hide the elements heading towards it trying to become hidden. This obviously can't work because the image being used for the logo-containing div and the body wouldn't line up.
So it seems as though what we're looking to do isn't feasible, but let's hear what you have to suggest. We're looking to use HTML5 + CSS3 for this project.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果内容框设置为
overflow:hidden和position:relative，则内容框内的任何元素在超出框边界时都应隐藏，即使它们是绝对定位的。这是一个 jsFiddle 说明： http://jsfiddle.net/c8LHL/
If the content box is set to
overflow:hiddenandposition:relativeany elements inside it should be hidden when outside the bounds of the box, even if they are absolutely positioned.Here is a jsFiddle illustrating: http://jsfiddle.net/c8LHL/