0

那是给布局大师的。

如何使用 HTML5/CSS/JS 创建一个将背景图像分成 3 个不同部分的响应式布局？

我有 3 张不同的图像，我想加入它们以创建动态背景作为羊皮纸样式（请参阅随附的参考图像）。所以我将有一个固定的标题，一个动态的中间部分，我可以编写任何大小的 HTML 文本和一个固定的预告片图像。

解决方案是否使用背景、div、iframe 等都没关系。欢迎任何可以解决这个难题的建议！

在此处输入图像描述

干杯，

大卫

4

1 回答 1

1

一种方法：

您可以拥有 3 个宽度为 100% 的 div

<div class="header"></div>
<div class="dynamic-body"></div>
<div class="footer"></div>

这是一个只有 HTML 和 CSS 的小提琴，裁剪的 img 不是那么完美。

http://jsfiddle.net/jbx5k4su/

将更新 fiddle 以取出 html img 标签并仅更改 div 的样式。

于 2015-10-14T18:45:55.653 回答