Css 前景背景色为纯色，而图像仍为透明

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

第一张幻灯片的其余部分应为纯色

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

该网站是在这里演示

目前有问题的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;
}

雷肯房地产开发公司
CSS:
.幻灯片{
背景附件：固定；
宽度：100%；
身高：100%；
位置：相对位置；
盒影：嵌入0px 10px 10px rgba（0,0,0,0.3）；
}
.包装纸{
宽度：960px；
高度：200px；
保证金：0自动；
位置：相对位置；
}
斯莱德诺先生{
字体系列：“Lato”，无衬线；字体重量：400；
位置：绝对位置；
底部：0px；
左：0px；
字体大小：100px；
字体大小：粗体；
颜色：rgba（255255,0.3）；
}
#menuwrapper{
宽度：90%；
高度：0px；
}
#滑动再研磨{
背景图像：url（../images/Foreground.png）；
背景重复：无重复；
背景位置：中心；
身高：100%；
宽度：100%；
}
/******************************
幻灯片1
*******************************/
#幻灯片1{
背景色：#e3e8cf；
背景图像：url（../ribahighgate dexigner james.jpg）；
背景重复：无重复；
背景附件：固定；
背景尺寸：封面；
}

请提供您目前拥有的代码。我觉得Chrome中的演示链接很不错，假设绿色的“我们的激情-Raikon-设计和建造”是前景剪贴图片。它到底有什么问题？到目前为止你都尝试了什么？嗨，Yochannah，我已经改变了前景图片以覆盖屏幕，这不是我想要的。我想在屏幕中央放一个小图片，周围有相同的背景颜色，而不丢失PNG的透明度Hi Jamie，这就是你想要做的吗？我只是改变了一些事情-我没有通过CSS添加背景Img，而是将Img添加到div nofocus中，并为#nofocus Img{z-index:1；position:fixed；}让我知道谢谢如果这是正确的，我可以张贴答案