0

我有一个背景图像，我想用作我的主导航菜单。我想要做的是将此图像切成切片并在某些区域/按钮中添加翻转、悬停事件。我试图获得与背景大小的封面相同的效果，但使用的是切片图像。

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;
        }

//EDIT 这是我到目前为止所做的... http://translationgames.org/template.html这个页面有一个css 类，用于定义以百分比为单位的宽度的每个图像。但它看起来有点愚蠢，并且存在舍入问题。请注意，当您翻转某些区域时，会出现一些事情，这就是为什么我想将其作为切片。我还没有创建 :hover 的东西。

所以我有一个图像被切割成不同大小的切片 一行是 1920 x 100 下一行是三个 220x320 800x320 900x320 的图像第三行是 1920x 233 等。我正在设计这个响应式设计以涵盖从 480px 到 2560px+++ 的所有格式我认为它的工作方式是拥有一个宽度为 100% 的背景容器 div“bgcontainer”，然后是一个背景线 div“backgline”，它是 inline-block 且宽度为 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>

这就是我认为它适用于css的内容

#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; */


}

但这不起作用，图像会断线。整行图像 1920px 的缩放比例不会超过 100%，就像您对背景封面所做的那样，一行中的三个图像会分成两行，并且它们的缩放比例不会超过其像素宽度。我显然走错了方向。你知道我应该怎么做吗？或者我应该读什么？提前致谢。

4

0 回答 0