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

你使用的方法是正确翻转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的确切宽度和高度

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>

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

定位页面的背景图像

2 个答案: