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

最新推荐文章于 2024-07-12 16:38:52 发布

zzhjava2006

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量1.6w

点赞数

分类专栏： WEB 文章标签： css class login stylesheet html border

本文链接：https://blog.csdn.net/zzhjava2006/article/details/6292359

版权

WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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="#" οnsubmit="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; }

zzhjava2006

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
用css控制背景图片大小的方法

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

扫一扫