Question

我正在尝试使用应用了background-image属性的空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; }

并将元素类添加到divs / lis / whatever或直接设置它

内联的元素没有高度和宽度，它们不像盒子一样被处理，并且body和html在这种情况下需要至少100％的高度

修改

老兄，你不明白设置.nav li到display: block（!!!）而不是内联并在px中给它高度它必须工作我只是尝试了

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

编辑2

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

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

编辑3

这是我的最后一次尝试：

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

Dude什么工作？！

您添加了CSS WRAPPED IN COMMENTS？！

你很难。

从div中制作背景图像并使其自动调整大小

1 个答案: