-1

我只是不知道背景会发生什么，在桌面上很好，但是当我尝试调整浏览器大小或在移动设备上查看时，背景不再存在。

桌面版截图
桌面版截图。

手机版截图
手机版截图。

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

    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>
4

2 回答 2

1

要将图像用作页面的背景附件，您可以执行以下操作：

HTML 在以下开头使用容器 div <body>：

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

CSS 将 background-attachment 放在容器 div 中，给 div 的宽度为 100% not px，这样它将在每个屏幕/视口中显示相同：

.container {
  width: 100%;
  background: url('http://www.amazonwalls.com/wp-content/uploads/2013/06/Big-Action-Spongebob-Squarepants-Cartoon.jpg');
}
于 2013-10-28T11:10:38.073 回答
-2

尝试使用 bootstrap 主题，使用起来非常简单方便，响应式 html 的好资源之一。

http://getbootstrap.com/2.3.2/getting-started.html

于 2013-10-28T11:06:23.613 回答