Question

我在Dribbble上找到了Outcrowd（示例链接为example 2）的一些很酷的网站图片。

主要思想是在登录页面上具有基本的（弯曲的或成形的）背景图像，该图像也作为主要内容的顶部标题出现在容器中。这种构造的问题是责任。我试图提出一些想法来解决此问题，但是它们并没有取得很好的效果。

想法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画布 我还试图提出一些可能可行的几何计算方法，但仅适用于javascript。（或响应性SVG？）上面的代码如下所示：

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

想法3：根本不可能

可能没有人这样做的原因...

请注意：实际运作中的网站Outcrowd所制作的框架没有产品图片中显示的框架。

如果您对如何完成此操作有任何想法，请回答可能有帮助的一切：）谢谢！

Answer 1

有可能，尽管有点麻烦：）

首先，您需要一个共同的参考点（枢轴），在该参考点上都必须锚定两个倾斜的图像/区域。由于宽度是可变的（响应能力，并且可能对所有用户都承担“责任”;）），所以该点必须位于页面中间某个y位置（我选择300px）。

然后，我们需要一个外部容器，该容器将用作一种剪贴蒙版（使用overflow:hidden）并旋转一点。内部容器绕着与外部容器相同的点旋转（以其自身的x：50％，y：100％旋转），然后沿相反的方向旋转以显示内容平直。现在将以倾斜的方式切下内部容器中的内容物。由于旋转的块在角落处留有“孔”，因此我们将外侧的一个扩大为安全的（页面的width:200%），将内侧的一个50%扩大为安全的（因为这将覆盖确切的页面宽度））。

server-side Angular

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

所以现在我们有了页面的背景。对于内容，我们将在.contents div内进行第二个容器组合，但是调整顶部位置以解决.contents块的顶部边距/填充。最后，我们在overflow:hidden上设置position:relative和.contents，以切断第二个容器组合的溢出内容。

所以，我们去了！现在可以在内部容器中填充所需的图像或需要的背景。为了正确定位，我将一些transform和position:fixed / position:absolute与left / top / bottom结合使用，固定了背景-背景，并使内容背景能够与页面的其余部分一起滚动。

看看我在上所做的工作示例

奖金

如果需要其他形状，或仅需要具有透明背景形状的图像，则无需旋转和放大。您只需使两个背景容器具有相同的锚点/枢轴（在x = 50％且y =作为bg图像底部选择的位置处）和大小相同。这是通过相对于页面宽度缩放.contents来完成的，因此您可以过度缩放内容的背景图像以匹配页面宽度。

你猜对了！有一个jsFiddle

的有效示例

（HTML / CSS）响应式背景框架垂直匹配的标题图像？

1 个答案: