Question

我有一个像素1280 x 1024的草图，我希望这个草图作为我的html页面的背景图像，我在网页上显示的任何其他内容都将作为div元素出现在此图像之上

我已经在许多网站上看到过这种情况，但是当我将图像放在背景中时，我就会在水平方向上滚动页面。

以下是我的css

body #background img {
    left: 0;
    min-width: 1024px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
}

<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">

<body>
 <div id="background"> 
  <img src="images/Sketch1.jpg">
 </div>
</body>

更新

将图像放在背景中，不重复将图像缩小。

我在这里举了一个例子：http://jsbin.com/ekaxum/2

Answer 1

body {
    background: url(url_here) no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}

从CSS 3规范：

'包含'：缩放图像，同时保留其固有的纵横比（如果有），使其最大尺寸，使其宽度和高度都能适合背景定位区域。

Answer 2

Mike先生，欢迎来到Stackoveflow。

只需将height:100%;属性添加到图像的CSS样式即可。问题是它的高度超过了您的实际窗口大小，因此会出现 vertical 滚动条。它会改变可用的窗口宽度，这就是你看到 horisontal 滚动条的原因。

如何在html页面上将图像作为背景

2 个答案: