Question

我需要在2（水平）中分割html页面的背景。顶部和底部将具有不同的背景图像/纹理，将重复，换句话说，可以使用窗口的大小进行扩展。除了这个“分割背景”之外，我想要显示一些内容，比如文本或图像。

此代码会像我想要的那样生成“分割背景”，但我不能/不知道如何将内容置于其上......

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; }
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
</body>

</html>

内容应垂直居中，并且在这个“分裂背景”之上。我尝试使用第三个div，使用z-index并使用css3多个bg功能，但我无法得到想要的结果。有什么建议吗？

Answer 1

使用position:fixed的示例：
http://jsfiddle.net/LBQbb/3/

要垂直居中未知高度的内容，您可以使用此技巧：
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

好在最后我找不到CSS的解决方案。如果浏览器窗口太小，我放在其他2个div上的内容图像将无法正确对齐...

我使用一些javascript解决了它，因为我开发的网站已经包含Javascript，这不是问题。

这是html：

<html>
<head>
<link href="css/reset-min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $(window).resize(function(){

                $('.content').css({
                    position:'absolute',
                    left: ($(window).width() 
                      - $('.content').outerWidth())/2,
                    top: ($('body').height() 
                      - $('.content').outerHeight())/2
                });

            });

       //To initially run the function:
       $(window).resize();

    });
    </script>

</head>

<body onload="$(window).resize()"> <!-- needed to correct loading bug -->

    <div class="top"></div>
    <div class="bottom"></div>

    <div class="content">
         <img alt="Content" src="img/01_illustration.png" /> 
    </div>
</body>
</html>

和css：

html, body { width:100%; height: 100%; }

body { min-height: 768px; min-width: 1024px; }


.top { width: 100%; height: 50%; background-image:url('img/01_texture_top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/01_texture_bottom.jpg'); }

.content {}

Answer 3

只需创建第三个div。因为它后来应该显示在顶部而不需要z索引。

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; min-width:950px; min-height: 950px;}
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
.third { position: absolute; top:50%; left:50%; width: 900px; margin-left: -450px; margin-top: -450px; }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="third"> add content here</div>
</body>

添加绝对位置并将其设置为顶部，左=（0,0），然后您可以毫无问题地使用它。忽略为背景赋予颜色的其他div。

编辑：

已修复以回答您的评论。就像它一样，它会创建一个900px到900px的框，始终位于屏幕中间。

css图像/内容超过2 <div>和垂直居中</div>

3 个答案: