1. 首页
  2. 问答
  3. CSS响应错误

CSS响应错误

2013-10-28 71 views
-1

我只是不知道背景发生了什么，在桌面上它很好，但是当我尝试调整浏览器大小或在手机上查看它时，背景不再存在。CSS响应错误

screenshot of desktop version
桌面版本的屏幕截图。

screenshot of mobile version
截图的移动版本。

---------风格----------------------

header .menu-wrap{ background: #474749; margin-top: 20px} 
    header .menu-wrap .main-menu > li{ float: right; background: #fff; border-left: 2px solid #fff; position: relative;} 
    header .menu-wrap .main-menu > li:first-child{ border-right: 2px solid #fff;} 
    header .menu-wrap .main-menu > li > a{ color: #fff; padding: 10px 16px; display: block; background: #474749; border-radius: 15px 0 0 0; font-size: 19px; font-family: 'Oron'} 
    header .menu-wrap .main-menu > li > a:hover{ background:#fff000; color: #414042 } 
    header .menu-wrap .main-menu > li:hover a{text-shadow: .0px 0px #000; } 
    header .menu-wrap .main-menu > li .sub-menu{ position: absolute; background: #e6e7e8; display: none; width: auto; z-index: 9999} 
    header .menu-wrap .main-menu > li .sub-menu li{ background: url(../images/bullet.png) no-repeat 130px center; padding-right: 20px; display: inline-block; float: right; width: auto; min-width: 120px;padding: 8px 18px; 
-webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;} 
    header .menu-wrap .main-menu > li .sub-menu li a{ display: block; margin-right: 15px} 
    header .menu-wrap .main-menu > li .sub-menu li:hover{ background: url(../images/bullet.png) no-repeat 131px center #fff000; color: #414042}

------ --- HTML -----------------------

   <div class="menu-wrap"> 
        <div class="grid-container"> 
         <ul class="main-menu"> 
          <li><a href="#">אודות</a></li> 
          <li><a href="#">לימודים</a></li> 
          <li><a href="#">מרכז מידע והרשמה</a></li> 
          <li><a href="#">שירות לסטודנט</a> 
           <ul class="sub-menu"> 
            <li><a href="">עד 20 תווים 12 pt</a></li> 
            <li><a href="">עד 20 תווים 12 pt</a></li> 
           </ul> 
          </li> 
          <li><a href="#">סגל</a></li> 
          <li><a href="#">כנסים ואירועים</a></li> 
          <li><a href="#">ספריה</a></li> 
          <li><a href="#">מחקר עיון והוצלא</a></li> 
          <li><a href="#">מעורבות חברתית</a></li> 
         </ul> 
         <div class="clear"></div> 
        </div> 
       </div>

来源

2013-10-28 James

+2

请在您指定的移动和桌面 –

+1

媒体查询背景属性添加CSS请你能提供你的html和css，否则很难帮你。我会在你的CSS中检查@media样式。 – Anobik

+0

大家好，我只是添加了CSS和HTML代码，希望这可以帮助，谢谢 – James

回答

1

要使用图像作为页面的背景附件，你可以这样做：

HTML 使用div容器只是<body>的开口之下：

<body> 
    <div class="container"> 
    // your html code inside the container div 
    </div> 
</body>

CSS 将背景附件放在容器内r除以，给DIV的100％不px的宽度，这样它会DISPLY同样在每个画面/视窗：

.container { 
    width: 100%; 
    background: url('http://www.amazonwalls.com/wp-content/uploads/2013/06/Big-Action-Spongebob-Squarepants-Cartoon.jpg'); 
}

来源

2013-10-28 11:10:38

+0

我试过了，但是当我调整浏览器的大小时，背景仍然消失 – James

+0

然后我必须假设在你的css文件中有一个媒体查询检测到屏幕分辨率的大小，当它到达手机屏幕尺寸。 解决这个问题的唯一方法是针对媒体查询并修改/删除它。 –

+0

我也试过它只使用颜色背景，结果是一样的，我使用“modernizr”库和“normalize.min.css”是否对它有影响？ – James

相关问题

 相关问题