大小可调的背景图像 [英] resizable background image
本文介绍了大小可调的背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面的代码，但我的图片不会调整大小，怎么回事？图像是否需要更大？
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://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 / cssmedia =screen，print，projection>
img＃background {
position：absolute;
top：0;
剩下：0;
宽度：100％
高度：100％;
}
< / style>
< / head>
< body>
< img id =backgroundsrc =greenbackground.pngalt =背景图片/>
< / body>
< / html>
解决方案
您还需要这个：
html，body {
width：100％;
身高：100％;
保证金：0;
padding：0;
overflow：hidden;
}
img＃background {
position：absolute;
top：0;
剩下：0;
宽度：100％;
身高：100％;
保证金：0;
padding：0;
}
注意，使用css3你可以这样做：
body {
background：url（...）no-repeat;
background-size：100％;
}
编辑：错过了a;
演示：
I have the following code but my image won't resize, how come? Does the image need to be bigger?
<!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>
解决方案
You also need this:
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;
}
Note, using css3 you can do this:
body{
background:url(...) no-repeat;
background-size: 100%;
}
Edit: Missed a ;
Demo:
这篇关于大小可调的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
