Question

请查看以下JSFiddle

＆＃13;

.container {
	width: 100%;
	background-color: yellow;
}

.classic {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-position: center center;
	background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg");
	background-size: contain;
	background-repeat: no-repeat;
}

.classic-img {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}

.classic-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.top-menu {
	width: 100%;
	height: 50px;
	position: relative;
	background-color: red;
}

.top-menu-buttons {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	text-align: center;
}

.top-menu-buttons .button {
	display: inline-block;
	vertical-align: middle;
	font-size: 25px;
	color: white;
}

.top-menu-buttons span {
	display: inline-block;
	vertical-align: middle;
	font-size: 25px;
	color: white;
}

.bottom-menu {
	width: 100%;
	height: 50px;
	position: relative;
	background-color: green;
}

.bottom-menu-buttons {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80%;
	text-align: center;
}

.bottom-menu-buttons .button {
	display: inline-block;
	vertical-align: middle;
	font-size: 35px;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}

＆＃13;

<div class="list"> 
	<a class="item">
		<div id="container" class="container">

			<div class="top-menu">
				<div class="top-menu-buttons">
					<button>-</button>
					<span>20</span>
					<button>+</button>
				</div>
		   </div>


		   <div id="classic" class="classic">
			   <div id="classic-img" class="classic-img">
				   <img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" />
			   </div>
		   </div>
			

		   <div class="bottom-menu">
			   <div class="bottom-menu-buttons">
			   <button class="button button-icon ion-eye">1</button>
			   <button class="button button-icon ion-refresh">2</button>
			   <button class="button button-icon ion-crop">3</button>
			   <button class="button button-icon ion-android-options">4</button>
			   <button class="button button-icon ion-social-tumblr">5</button>
		   </div>
	   </div>
	</a>

</div>

＆＃13;

CSS：

我想要达到的目标如下：

红色区域应该是顶部菜单。它不应该是固定的顶部位置，它应该始终位于图像的顶部。

如您所见，图像具有白色背景和黑色地面。它应该看起来像一个宝丽来。

绿色区域应该是底部的菜单，但也不是固定在底部，它应该始终位于图像下方。如果没有足够的空间，它应该只是滚动而不是铆接或esize任何div。我猜主要的问题是中间的div，其中带有背景图像的图像是。

我现在尝试获得正确的css但不幸的是我非常缺乏经验，而我现在所能做的只是尝试和错误，但我无法让它发挥作用。

Answer 1

从position: absolute和.classic-img

中删除.classic-img img

根据需要添加margin: 100px auto;调整100px，你也设置了背景尺寸：包含和bg图像的纵横比几乎等于图像，因此你只会看到一小部分这里的bg图像是小提琴 - jsfiddle.net/18vg13dt/3

此外，如果你想要左右差距，也可以根据你的需要使用 - margin: 100px 50px;。

jsfiddle

Answer 2

我猜this是你想要的吗？

.classic {
    background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.classic-img {
    padding: 10px;
    box-sizing: border-box;
}

.classic-img img {
    display:block;
    width:100%;
    height:100%;
}

Answer 3

您需要设置课程.classic-img

的高度

试试这个：

.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}

如果您仍然遇到问题，请回来告诉我们。

与背景图像没有显示的图像

3 个答案: