定位页面的背景图像

问题描述：

我有两个图像，一个图像的尺寸为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>

答

您所使用的方法是正确的翻转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的

答

嘿，现在你可以相对和绝对像这样

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>

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

定位页面的背景图像

相关推荐