Question

我是CSS的初学者，我想创建一个包含2列（左右）的着陆页，每列都有不同的背景图像。

宽度：2张图片应填满屏幕的50％。高度：屏幕的100％。

我认为这很简单，但无法弄清楚。有人可以给我一些建议。

感谢...

Answer 1

您可以将position:absolute;与背景图片一起使用：

<强> HTML：

<div class="half-page left"></div>
<div class="half-page right"></div>

<强> CSS：

.half-page {
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    background-size:cover;
}
.left {
    left:0;
    background-image:url(www.url.com/image.png);
}
.right {
    right:0;
    background-image:url(www.url.com/image2.png);
}

Answer 2

试试这个：

<强> CSS

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 50%;
    background:url("http://res2.windows.microsoft.com/resbox/en/windows/main/01fdadc8-e0e2-46a2-aac8-50b174f40cca_4.jpg") no-repeat center center fixed;
    height: 100%;
}



.fright {
    float: right;
    background:url("http://wallpapers55.com/wp-content/uploads/2013/08/Best-Beach-Wallpapers-Background-HD-Wallpaper.jpg") no-repeat center center fixed;
    height: 100%;
    width: 50%;
}

<强> HTML

<div class="wrap">
    <div class="fleft">Hello World This is LEFT Content</div>
    <div class="fright"> Hello World This is RIGHT Content</div>
</div>

2列，背景图像填充100％的屏幕

2 个答案: