繁体 English 中英

CSS中的液体背景

[英]Liquid backgrounds in css

原文 2014-01-21 15:57:03 0 1 html/ css/ background/ liquid-layout

我有两行背景的页面。 一条线是黄色，高度为65％，另一条线是灰色，高度为35％，而且我在中心有一个绝对定位的div，其宽度和高度固定。 灰线正好在我的div下面。 问题是，当我更改页面大小或缩小（以模拟大尺寸屏幕）时，div出现在灰色背景上方。 如果我将每条背景线的高度设置为50％，那么一切都很好，但是我需要65％和35％。 这是jsfiddle链接： http : //jsfiddle.net/J2LTR/尝试缩小页面，黑色方块将位于灰色背景上方。 任何想法如何解决这一问题？

这是我的代码：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%
}
    .yellow {
    width: 100%;
    height: 65%;
    background: #e5bd00;
    background-repeat: repeat;
    }
    .gray {
    width: 100%;
    height: 35%;
    background: #d2d2d2;
    background-repeat: repeat;
    }
    .wrap {
    min-width: 300px;
    width: 100%;
    height: 100%;
    min-height: 600px;
    margin: 0 auto;
    position: relative; 
    }
    .center_box {
    background: #000;   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="yellow"></div>
        <div class="gray"></div>
        <div class="center_box">some content</div>
    </div>
</body>
</html>

1 个解决方案

您的top和margin-top值不正确，因为它是基于中心的，并且寄宿生下降了65％。 试试这个代替：

.center_box {
    background: #000;   
    position: absolute;
    top: 65%;/* the tune you need to start with */
    left: 50%;
    margin-top: -235px;
    margin-left: -200px;
    width: 400px;
    height: 235px;
    }

http://jsfiddle.net/J2LTR/1/

如果只想包含年轻的浏览器，甚至可以在身体上使用线性渐变： http : //codepen.io/anon/pen/EImiz