(HTML/CSS) 响应式背景框垂直匹配 header 图像？

Question

我在 Dribbble 上找到了 Outcrowd (example linked, example 2) 的一些非常酷的网站作品集图片。

主要想法是在着陆页上有一个基本的（弯曲的或形状的）背景图像，该图像也出现在容器中作为主要内容的顶部 header。这个构造的问题是责任。我试图提出一些想法来解决这个问题，但效果并不理想。

想法 1：图像层

body {
 margin: 0;
 background-color: #e7e6ed;
}

#bg {
 background-image: url("https://i.imgur.com/lUphGJh.png");
 background-repeat: no-repeat;
 background-size: cover;
 width: 100%;
 padding-bottom: 50%;
 background-position: bottom;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1;
}

#page {
    margin-top: 50px;
 position: relative;
 z-index: 10;
 padding: 0;
 box-shadow: 0 0 20px black;
}

header {
 background-image: url("https://i.imgur.com/NTwuZ1x.png");
 background-color: transparent;
 background-repeat: no-repeat;
 background-size: cover; 
 background-position: bottom;
 min-height: 300px;
}

.white {
 background-color: white;
}


/* The width of this would be different by viewports */
.container {
  margin: 0 auto;
  width: 80%;
}

<body>
  <div id="bg"></div>
    <div id="page" class="container">
  <header>
      <!-- Some content here -->
      Title
      </header>
      <section class="white">
        <!-- Main content here -->
        <br><br>Lorem ipsum<br><br>dolor sit amet.<br><br>Lorem ipsum<br>
<br>Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum <br><br>
Lorem ipsum<br><br>Lorem ipsum<br><br>Lorem ipsum
    </section>
  </div>
</body>

在页面加载时，内线和外线应该匹配，但似乎不可能让这个东西负责图像层。

想法 2：SVG 或 HTML5 canvas 我还尝试想出一些可能可行但仅适用于 javascript 的几何计算。（或者响应式 SVG？）上面的代码看起来像这样：

<div id="bg"><svg><!-- Paths and calculations --></svg></div>

想法三：根本不可能

没有人做这件事可能是有原因的...

请注意：Outcrowd 制作的实际工作网站没有作品集图片上显示的框架。

如果您对如何做到这一点有任何想法，请回答任何可能有帮助的问题:) 谢谢！

Answer 1

这是可能的，虽然有点麻烦:)

首先，您需要一个共同的参考点（枢轴），其中两个倾斜 images/areas 都必须锚定。由于宽度是可变的（响应能力，可能对所有用户都采用 'responsibility' ;)），该点必须位于页面中间的某个 y 位置（我选择了 300px）。

然后我们需要一个外层容器，用作一种剪贴蒙版（使用 overflow:hidden）并稍微旋转一下。内部容器围绕与外部容器相同的点旋转（在自身的 x:50%，y:100%），但随后以相反的方向旋转以直接显示内容。内容器的内容现在将以倾斜的方式被切断。由于旋转块在角落留下 'holes'，为了安全起见，我们扩大了外部的（页面的 width:200%）和内部的 50%（因为它将覆盖确切的内容）页面宽度）。

现在我们需要扩大内部容器以覆盖左下角剩余的空space。所以我们调整 height 并相应地更改 transform-origin 的顶部坐标，以将该点保持在枢轴上。

现在我们有了页面的背景。对于内容，我们将在 .contents div 内创建第二个容器组合，但调整顶部定位以考虑 .contents 块的顶部 margin/padding。最后我们在 .contents 上设置 overflow:hidden 和 position:relative 来截断第二个容器组合溢出的内容。

那么，我们开始吧！内部容器现在可以填充您需要的图像或任何需要的背景。为了正确定位，我使用一些 transforms 和 position:fixed/position:absolute 结合 left/top/bottom，固定背景-背景并让内容背景能够与页面的其余部分一起滚动。

看看我在 jsFiddle

上做的工作示例

奖金

如果您想要其他形状，或者只是具有形状和透明背景的图像，则不需要旋转和放大。您只需让两个背景容器具有相同的 anchor/pivot（在 x=50% 和 y=您选择的背景图像底部）和相同的大小。这是通过相对于页面宽度缩放 .contents 来完成的，因此您可以放大内容的背景图像以匹配页面宽度。

你猜对了！这个 here

有一个工作示例

(HTML/CSS) 响应式背景框垂直匹配 header 图像？

(HTML/CSS) Responsive background frame vertically matching header image?

html

css

svg

background-image

html5-canvas