可调整大小的背景图片(resizable background image)

2019-10-30 14:21发布

我有以下的代码，但我的形象不会调整，怎么来的？是否图像需要更大？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
 <title>blah</title>
 <style type="text/css" media="screen, print, projection">

img#background {     
    position: absolute;     
    top: 0;     
    left: 0;     
    width: 100%     
    height: 100%; 
} 

</style> 
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />



</body>
</html>

Answer 1:

你也需要这样的：

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
img#background {     
    position: absolute;     
    top: 0;     
    left: 0;     
    width: 100%;  
    height: 100%; 
    margin:0;
    padding:0;
}

注意，使用CSS3，你可以这样做：

body{
    background:url(...) no-repeat;
    background-size: 100%;
}

编辑：错过了;

演示：

http://jsfiddle.net/jJT45/

Answer 2:

你将它设置为100％，但什么100％？尽量使身体一样100％的高度和宽度属性，看看会发生什么。

文章来源: resizable background image

可调整大小的背景图片(resizable background image)

Answer 1:

Answer 2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮