Question

我必须做一个带有中央DIV（这是菜单）和十字架作为背景的网站。当用户进入网站时，十字架要居中，所以我用了

"background-position:50% 50%;"

效果很好。问题是，当我点击各种菜单时，十字中心必须进入边界。当用户点击右侧图像时，十字中心必须位于屏幕的右边界，顶部，底部和左侧图像也是如此。

我想避免修复MAIN的大小，而不是使用％，但是当我这样做时，不可能将十字架中间正确地放在边框上（它移动，因此定位变得错误）。

以下是查看图片的链接，以便更好地展示： image here

请注意，cross'image是3000x3000px大。有人有想法实现这个吗？

这是我的HTML：

<div id="main">
   <div class="menuLosange">
    <div class="losange" id="menuHaut"></div>
    <div class="losange" id="menuBas"></div>
    <div class="losange" id="menuDroite"></div>
    <div class="losange" id="menuGauche"></div>
   </div>
</div>

这是我的CSS：

body {  
    width:100%;  
    margin:auto;  
    padding:10px;  
}


#mainLeft {  
    display: inline-block;  
    width: 20%;  
    vertical-align: top;  
    padding-top:20px;  
    font-family: verdana;     
}

#main {  
    display: inline-block;  
    width:79%;      
    background-color:#E6E6E6;  
    height:900px;  
    background-image: url('images/background2.png');  
    background-position:50% 50%;  
    overflow:hidden;  
}

感谢您的回复。

菜单的响应网站的位置

0 个答案: