Question

我对响应式设计比较陌生。我的客户提供了一个用于Web应用程序背景的图像。它有一些耀斑和一个矩形区域，用于＆＃34;工作区＆＃34;的网络应用程序。我已经使这个背景图像响应。我想要做的是创建一个工作区div，它将与背景图像一起缩放，并保持在图像上提供的工作区区域上的位置。请参阅以下问题，以获得此功能的良好可视化示例。

Place div elements on responsive background (Bootstrap 3)

我的背景图像与上例中的信封类似，但未对角定位。这样就消除了一些复杂性。我试过12列，无法正确定位overlayPane。任何提示都非常感谢。

CSS：

    html, body
    {
        min-height: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .bg_img
    {
        background: url('../Images/BACKGROUND.jpg') no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-height: 100%;
    }

HTML：

<body>
    <div id="mainDiv" class="bg_img" style="height: 100%;">
        <div id="overlayPane">
        </div>
    </div>
</body>

将div元素放在响应背景上，并定义＆＃34;工作空间＆＃34;区域（Bootstrap 3）

0 个答案: