如何显示大于实际 div 大小的背景图像？答案

【问题标题】：How to display a background image larger than the actual div size?如何显示大于实际 div 大小的背景图像？
【发布时间】：2013-01-08 03:45:59
【问题描述】：

我想显示大于实际 div 大小的图像并将其滚动到 div 内。

图像应该在 div 后面，并且图像的一部分是隐藏的。

要查看所有图像，我应该滚动它。

demojsFFidle

<div id="wrapper">
    <img src="http://i53.tinypic.com/2ymznmx.jpg" width="100" height="100" />
</div>

#wrapper {
  border: 1px solid black;
  width:80px;
  height;80px;
  margin:10px;
  z-index:4;
}
img {
    border: 1px solid red;
   display: inline-block;
}

非常感谢。

【问题讨论】：

标签： html css image

【解决方案1】：

将overflow: scroll; 添加到您的 div 中。这将允许用户在 div 内滚动以查看背景。

【讨论】：

将其添加到样式规则中，而不是 div :)
是否有可能获得相同的结果并隐藏滚动条？
@Ken-AbdiasSoftware 是的，是的，是的 :) 我知道我的意思哈哈
@user1954217 我不确定用户如何知道在没有滚动条的情况下滚动。
用户不应该知道我做了一个游戏，代码会做。不是用户不是手册

【解决方案2】：

您可以将overflow:auto; 添加到#wrapper div。这样，滚动条只会在需要时显示。

如果您根本不想显示滚动条，可以添加overflow:hidden;。

JSFiddle : http://jsfiddle.net/BZeLR/30/

【讨论】：

【解决方案3】：

要在 div 后面显示图像...尝试使用 z-index 属性...并在您的 css 中添加滚动...

类似...

your_css {
z-index:2;
overflow:scroll;
}

可能有帮助...

【讨论】：