css - 页面背景图片的定位

Question

我有两个图像，一个图像的尺寸为 1800 X 1140，另一个褪色图像的尺寸为 1 X 1140。我需要将这两个图像组合起来，使第一个图像应该出现一半，第二个图像应该像渐变一样淡化第一个图像。我按如下方式实现了 div。

<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

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

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>

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

Answer 2

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

<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 添加确切的宽度和高度