0

我有一个简单的视差站点构建，我试图将一个背景图像叠加在另一个背景图像上。前景图像基本上是带有透明切口的徽标，而切口是我希望在屏幕上显示的背景图像的唯一部分。

第一张幻灯片的其余部分应该是纯色的。

我想这样做，以便尽可能保持前景图像的最佳质量，将其缩放为 % 看起来没有一半好。

该网站在这里进行演示http://www.designandintention.com/Raikon/

到目前为止有问题的HTML：

<div align="center" class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".7">

<div align="center" id="menuwrapper">

<div align="center" id="slidemenu">
<div id="hrs">
</div>

Raikon Property Development

</div>

</div>

<div id="slideforeground" data-stellar-ratio="0" data-stellar-vertical-offset="0"alt="">

</div>

<a class="button" data-slide="2" title=""></a>

</div><!--End Slide 1-->


CSS:

.slide{
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
    width:960px;
    height:200px;
    margin:0 auto;
    position:relative;
}
.slideno{
    font-family: 'Lato', sans-serif;font-weight:400;
    position:absolute;
    bottom:0px;
    left:0px;
    font-size:100px;
    font-weight:bold;
    color:rgba(255,255,255,0.3);
}
#menuwrapper {
width:90%;
height:0px;
}

#slideforeground{
background-image:url(../images/Foreground.png);
background-repeat:no-repeat;
background-position:center; 
height:100%; 
width:100%; 
}

/******************************
 SLIDE 1 
*******************************/
#slide1{

    background-color:#e3e8cf;
    background-image:url(../ribahighgate-dexigner-james.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size:cover;
}
4

0 回答 0