html - 背景附件:scroll does not render properly on zoom out

Question

25% 缩放和 100% 缩放的两个图像。我正在努力实现这样的目标

required model

我面临的问题首先是我有一个标题，其中有导航栏，其中有四个内容，关于，.. .当我将缩放百分比降低到 25% 时。导航栏元素将消失的 div.it.

第二件事是当我降低缩放百分比时，图像无法正确渲染。它的尺寸正在减小。

我面临的第三个问题是 header-cont(div) 和 center-cont(div) 正在合并。我知道这与 margin collapsing 有关，但我无法解决。 我是初学者，请帮助我。

jsfiddle of my problem

例子:

    <div id="page">
<div id="header-cont">
          <div id="header">
            <div id="logo">
                <a href="index.html" ><img src="bingo.png" /></a> 
             </div>
            <ul id="navigation">
                    <li bgcolor="green">
                        Home                
                    </li>
                    <li>
                        About
                    </li>
                    <li>
                        Insurance
                    </li>
                    <li>
                       Contact Us
                    </li>

            </ul>
    </div>
  </div>

<div id="center-cont">
        <div id="center">
                <div id="content">
                 <h3>Travel Insurance</h3>
                </div>
        </div>
</div>

<div id="footer-cont">
        <div id="footer">

        </div>

</div>

<div id="end-cont">
        <div id="end">

        </div>

 </div>
</div>

CSS:

body
{
    margin:0 auto;
}

#page
{
    height:2400px;
    margin:0 auto;
    width:1000px;
}
#header-cont
{
    position:fixed;
    width:inherit;
    z-index:1;
    padding-top:1px;
}
#header
{   
    position:relative;
    background-color:black;
    height:80px;
    background-image:url(header.png) repeat-x;
}
#logo
{
    position:relative;  
    margin-top:auto;
    margin-left:100px;
    float:left;
}
#navigation
{
    margin-left:150px;
    display:inline-block;
    list-style:none;
    color:white;    
}
#navigation li
{
    position:relative;  
    float:left;
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    margin:12px 30px
}
#center-cont
{
    position:relative;
    //padding:1px;
    //margin-top:20px;
    width:1000px;   
    //margin:0 auto;
}
#center
{
    height:800px;
    background-image:url(travel.png);
//  background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
//  background-size:cover;
    min-height:100%;
    min-height:100%;
}
#content
{
    z-index:10;
    color:blue;
}
#footer-cont
{
    //position:fixed;
    width:1000px;   
    top:250px;
    margin:0 auto;
}
#footer
{
    background-color:green;
    height:100px;
    //background-attachment:fixed;
}
      #end-cont
      {
    width:1000px;   
     // top:300px;
    margin:0 auto;
      }
        #end
      {
    background-attachment:fixed;
    background-image:url(health.jpg);
    background-repeat:no-repeat;
    height:800px;
      }

对于我糟糕的缩进，我感到非常抱歉。

Answer 1

几个问题。你在用浏览器缩放吗？如果是，为什么？如果它是可访问性的情况，那么使用切换选项来增加某些元素的大小是更好的做法。使用浏览器缩放时，您总会遇到问题，因为它与浏览器处理元素大小的分数和舍入的方式有关。要么为扩展留出空间，要么检查为什么您需要网站使用浏览器的缩放功能。