css3在一行中添加3个图像，并将百分比缩放到浏览器的整个范围

我有一个背景图像，我想用它作为我的主导航菜单。我想做的是把这张图片切成片，并在某些区域/按钮中添加滚动、悬停事件。我试图有一个切片图像，但与背景大小的封面相同的效果

html { 
            background: url(../images/confetti.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        } 

//编辑 这就是我到目前为止所做的。。。此页面为每个图像提供了一个css类，该类以百分比形式定义宽度。但它看起来有点愚蠢，而且存在舍入问题。请注意，当您在某些区域上滚动时，会出现一些东西，这就是我希望将其作为切片的原因。我还没有创建：悬停的东西

因此，我有一个图像被切割成不同大小的切片，一行是1920 x 100，下一行是三个220x320 800x320 900x320的图像，第三行是1920x 233等。我设计这个是为了响应设计，涵盖从480px到2560px++的所有格式，我认为它的工作方式是有一个背景容器div“bgcontainer”宽度为100%，然后是背景线div “背线”是内联块，宽度为100%。下面是一个html的示例

<div class="bgcontainer">
  <div id="backgline"> 
  <img src="images/images/backgroundfragments_01.jpg" alt="Translation games"><!--
  --></div>
  <div id="backgline"><!--
  --><img src="images/images/backgroundfragments_02.jpg" alt="Translation games"><!--
  --><img src="images/images/backgroundfragments_03.jpg" alt="Translation games"><!--
  --><img src="images/images/backgroundfragments_04.jpg" alt="Translation games"><!--
  --></div>
    <div id="backgline"> 
  <img src="images/images/backgroundfragments_05.jpg" alt="Translation games"><!--
  --></div>      

但这不起作用，图像会断线。整行图像1920px的缩放比例不会超过100%，就像你可以使用背景覆盖一样，一行中的三个图像会断为两行，并且它们的缩放比例不会超过像素宽度。我显然走错了方向。你知道我该怎么做吗？或者我应该读点什么？

---

提前谢谢

你能帮我澄清一下你想存档什么吗？对不起，我还没有这些图片在线。我发现，如果我在每个切片图像中加入一个百分比，那么整个图像的比例就会正确。亚像素舍入有一个问题，但我可以用更正常的尺寸重新切割。我刚刚上传了这个页面，我觉得我必须用javascript而不是css3来完成这个页面。问题是，当宽度低于800px时，空的底部开始出现。我仍然在努力创建一个：使用我正在使用的方法悬停。

#bgcontainer{width:100%;
}
#backgline {

    background: rgb(0,0,0);
    display: inline-block;
    position: inherit;
    font-size: 0;
    text-decoration:none;
    top: 0; 
    left: 0;

    width : 100%;
    height:auto;


    /*min-height: 100%;
    max-width: 800px;
    min-width: 1280px; */


}