用css控制背景图片大小的方法

Google了一下，用css控制背景图片的大小等属性的方法，大家给的建议和方法总是感觉不给力，一般的做法为用css更换背景图片，而我的需求是同一张图片，引入不同的CSS控制其展现。（说明：由于我做了一个嵌入式小板子的web，空间有限，图片又是比较占空间的，又的做到在不同的分辨率终端上展现不同的效果，SO，最好就是只用一张图片，用少量的css去控制其大小。）

在传统的背景图片的做法是用background-image:imgurl，这样是无法控制其大小的（也许是我还没找到方法），所以我的想法是用z-index属性去做背景

demo代码及注释如下：html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html class=" ext-strict"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" ><title>WEB OS Login</title><head><link rel="stylesheet" href="filelogin1.css" mce_href="filelogin1.css" /><mce:script type="text/javascript" src="file/jquery.js" mce_src="file/jquery.js"></mce:script><mce:script type="text/javascript"></mce:script></head><body><div align="center"> <div class="baifendiv"> </div> <img src="file/loginbg.png" mce_src="file/loginbg.png" /> </div><div><form method="post" action="#" onsubmit="return browser()" > <table class="formtable" align="center"> <tr height="15%"> <td> </td> <td> </td> <td> </td> </tr> <tr height="15%"> <td> </td> <td> </td> <td> </td> </tr> <tr height="15%"> <td> </td> <td> </td> <td> </td> </tr> <tr height="10%"> <td align="right"><label>请选择登录系统分辨率</label></td> <td><select class="screen" id="screen" name="screen" style="border:#666666; background:#CCCCCC" mce_style="border:#666666; background:#CCCCCC"> <option value="default" id="scdefault" selected="selected">default</option> <option value="640">640</option> <option value="1024">1024</option> <option value="1920">1920</option> </select></td> <td rowspan="4"><span class="supported"><b>Supported Browsers</b><br> <a href="http://www.mozilla.org/download.html" mce_href="http://www.mozilla.org/download.html" target="_blank">Firefox 2+</a><br> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" mce_href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" target="_blank">Internet Explorer 7+</a><br> <a href="http://www.opera.com/download/" mce_href="http://www.opera.com/download/" target="_blank">Opera 9+</a><br> <a href="http://www.apple.com/safari/download/" mce_href="http://www.apple.com/safari/download/" target="_blank">Safari 2+</a></span> </td> </tr> <tr height="10%"> <td align="right"><label>User name</label></td> <td><input class="usernameinput" type="text" name="username" readonly="readonly" value="admin"></td> </tr> <tr height="10%"> <td align="right"><label>Password</label></td> <td><input class="passwdinput" name="password" type="password"></td> </tr> <tr height="10%"> <td align="right"><label style="display:none" mce_style="display:none" class="errormsg">密码错误</label></td> <td><input name="submit" type="submit" id="submitBtn" value="login" src="select2css/mac-select.gif" mce_src="select2css/mac-select.gif"></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table></form><div><mce:script type="text/javascript"></mce:script></body></html>

css

login1.css:

img { position: absolute; z-index: -1; width: 800px; height: 600px; margin-right: 400px; margin-left: -400px; margin-top: 50px;}.formtable { margin-top: 32px; width: 800px; height: 600px;}.supported { color: #ffffff; font-size: 20px;}.baifendiv { height: 0%;}.usernameinput { width: 80px; height: 25px; font-size: 17px;}.passwdinput { width: 80px; height: 25px; font-size: 17px;}.screen { width: 80px; height: 25px; font-size: 17px;}

login2.css:

table td { /*ҳ��*/ font-size: 10px; font-family: "��";}img { /*��ͼƬ��*/ position: absolute; z-index: -1; /*��ʾ�ڵײ�*/ width: 500px; height: 300px; margin-right: 250px; margin-left: -250px; /*��Ǿ��Ч��Ϊ��width��һ�� */ margin-top: 50px;}.formtable { margin-top: 30px; width: 500px; height: 300px;}.supported { color: #ffffff; font-size: 10px;}.baifendiv { height: 10%;}.usernameinput { width: 50px; height: 17px; font-size: 12px;}.passwdinput { width: 50px; height: 17px; font-size: 12px;}.screen { width: 50px; height: 17px; font-size: 12px;}

秒客网

用css控制背景图片大小的方法

相关文章