用 div 制作背景图片并自动调整大小

Question

我正在尝试使用空 div 应用背景图像属性从页面的顶部到底部创建多个图像堆栈，问题是因为它们没有浏览器的大小就好像它们不存在一样，是否有解决此问题的技巧？当我添加 'auto' 的 'width' 和 'height' 时，它的响应就好像我没有向 div 添加任何元素一样。如果 "background-size" 设置为 'cover'，它们将一个堆叠在另一个之上。这是我希望最终结果看起来像的样机照片： http://i58.tinypic.com/9uptlw.jpg

代码如下：

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}

/* end of browser styles */

@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);

#logo {
 padding-right: 10px;
 padding-top: 10px;
}

nav {
 background: rgba(0,0,0,.7);
 padding: 5px 0;
 position: relative;
 z-index: 10px;
}
nav li {
 display: inline;
 padding: 0 20px;
}
nav ul {
 list-style-type: none;
}
nav ul a{
 text-decoration: none;
 color: white;
}

nav a:hover {
 color: rgb(207, 207, 207);
}
body {
 height: auto;
 width: auto;
}
#bg1 {
 background: url(../images/wedding.png) no-repeat center center;
 /*width: 1280px;
 height: 720px;*/
 background-size: cover;
}
#bg2 {
 background: url(../images/earrings.png) no-repeat;
 /*width: 1280px;
 height: 720px;*/
 background-size: cover;
}
#bg3 {
 background: url(../images/watch.png) no-repeat;
 /*width: 1280px;
 height: 720px;*/
 background-size: cover;
}
#bg4 {
 background: url(../images/lightning.png) no-repeat;
 /*width: 1280px;
 height: 720px;*/
 background-size: cover;
}

<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
 <head>
  <meta charset="utf-8">
  <title>SD עיצובים</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div id="wrapper">
   <header div="mainHeader">
    <nav div="mainNav">
     <ul>
      <img id="logo" src="images/title.png"/>
      <li><a href="index.html">דף הבית</a></li>
      <li><a href="about.html">אודות</a></li>
      <li><a href="jewelery.html">תכשיטים</a></li>
      <li><a href="contact.html">צור קשר</a></li>
     </ul>
    </nav>
   </header>
   <div id="bg1"></div>
   <div id="bg2"></div>
   <div id="bg3"></div>
   <div id="bg4"></div>
  </div>
 </body>
</html>

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}

/* end of browser styles */

@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);

#logo {
 padding-right: 10px;
 padding-top: 10px;
}

nav {
 background: rgba(0,0,0,.7);
 padding: 5px 0;
 position: relative;
 z-index: 10px;
}
nav li {
 display: inline;
 padding: 0 20px;
}
nav ul {
 list-style-type: none;
}
nav ul a{
 text-decoration: none;
 color: white;
}

nav a:hover {
 color: rgb(207, 207, 207);
}

html, body { width: 100%; height: 100%}
#bg1 {
 background: url(../images/wedding.png) no-repeat;
 display: block;
 height: 1920px;
 width: 1080px;
 background-size: cover;
}

<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
 <head>
  <meta charset="utf-8">
  <title>SD עיצובים</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div id="wrapper">
   <header div="mainHeader">
    <nav div="mainNav">
     <ul>
      <img id="logo" src="images/title.png"/>
      <li><a href="index.html">דף הבית</a></li>
      <li><a href="about.html">אודות</a></li>
      <li><a href="jewelery.html">תכשיטים</a></li>
      <li><a href="contact.html">צור קשר</a></li>
     </ul>
    </nav>
   </header>
   <div id="bg1"></div>
   <div id="bg2"></div>
   <div id="bg3"></div>
   <div id="bg4"></div>
  </div>
 </body>
</html>

Answer 1

你可能只需要添加

html, body { width: 100%; height: 100%; }
.element { display: block; }

并将元素 class 添加到 divs/lis/whatever 或直接设置样式

内联元素没有高度和宽度，它们不像盒子那样对待，而且在这种情况下，body 和 html 需要至少有 100% 的高度

编辑

伙计，你不明白将 .nav li 设置为 display: block (!!!) 而不是内联并以 px 为单位给它高度它必须工作我刚试过

我的第一个建议是将元素 class 添加到 li，但现在使用我编辑过的答案，它将起作用

编辑 2

然后将 class="element" 添加到每个 bg divs 和 css 就像我上面写的那样，然后 divs 需要一些高度，因为如何浏览器知道这个空 div 应该有多少高度？

html <div id="bg1" class="element"></div> 和 css .element { display: block; height: 600px; }

编辑 3

这是我最后一次尝试：

http://zapraszam.net/public/articles/dummy/

伙计，什么不起作用？！

您添加了 CSS 评论？！

你是个硬汉

用 div 制作背景图片并自动调整大小

Making background image out of a div and make it auto resize

css

background

position

resolution

image