Div 元素内的图像未显示答案

【问题标题】：Image inside the Div element not showingDiv 元素内的图像未显示
【发布时间】：2012-02-10 05:48:16
【问题描述】：

div {position: relative;}


#wrapper { 

background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position:  center;
background-size: 100% auto;

}

<body>

<div id="wrapper">
 </div>

我正在尝试其他方法来以不同的元素呈现 ocean.png 的背景图像。现在我正在放入一个 div 并且它没有显示。早些时候，我将显示的主体放入显示的图像中，当首先在浏览器上水平拉伸然后垂直拉伸时，图像能够拉伸全尺寸，但是当我首先垂直拉伸时，主体中的背景图像不会全屏拉伸，顶部和底部的空白区域。

我现在正在试验一个 div，但它根本没有出现。

【问题讨论】：

您是否尝试过实际添加宽度和高度？还是添加内容？
您是否尝试过任何调试工具（chrome 或 firebug 或其他工具）来查看 div 是否真的存在或那些“顶部和底部的空白”是什么？

标签： html css

【解决方案1】：

您必须设置包装器的宽度。宽度：100% 和高度：100%

【讨论】：

【解决方案2】：

需要设置wrapper div的宽高，如果图片和CSS不在同一个目录下，则引用错误。如果您在 /images 目录中有图像，则应将它们称为 url(/images/myimage.png)

【讨论】：

【解决方案3】：

像其他人所说的那样设置包装器的width和height，并将这些css样式加入一个声明中，一旦设置了容器的尺寸，您就可以摆脱所有其他样式。

background: url(ocean.png) center no-repeat

【讨论】：