页面背景图像的位置

Question

我有两个图像，一个图像的尺寸为1800 X 1140，另一个图像的尺寸为1 X 1140，我需要将这两个图像组合在一起，以便第一个图像应占一半，第二个图像应像一个渐变一样使之褪色。第一张图片。我实现了divs如下。

<div style="background:url('first-img.png') no-repeat fixed top center transparent;">
   <div style-"background:url('second-img.png') repeat fixed bottom center transparent;">

   </div>
</div>

Answer 1

您使用的方法是正确翻转背景图像的垂直和水平位置..正确的顺序是水平第一和垂直第二，代码将像这样

<div style="background:url('first-img.png') no-repeat fixed center top transparent;">
   <div style-"background:url('second-img.png') repeat fixed center top transparent;">

   </div>
</div>

并添加div的确切宽度和高度

Answer 2

嘿，现在您可以像这样定义相对和绝对位置

Define your parent postion relative and child define absolute 

的CSS

    .parent{
position:relative;
    width:500px;
    height:200px;
    border:solid 1px green;
    background:url('first-img.png') no-repeat fixed top center transparent;
}




.child{
position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:solid 2px red;
    background:url('second-img.png') repeat fixed bottom center transparent;
}

的HTML

 <div class="parent">
       <div class="child">
    -------
       </div>
    </div>

根据您的设计更改宽度和高度...