A. 关于用js改变td背景图片的
eval只有在IE下好使,Chrome和filefox里不太好使。
建议把eval全部换成document.getElementById,这样几个浏览器都兼容了。
比如:
whichEl = eval("submenu" + sid);可以换成whichEl = document.getElementById("submenu" + sid);
eval("submenu" + sid + ".style.display=\"\";");可以换成document.getElementById("submenu" + sid).style.display = "";
B. 求网页背景图片居中且自适应屏幕大小的方法,CSS或JS都可以
尝试下这个...
<STYLE TYPE="text/css">
<!--
BODY {background-image: URL(photo/picture1.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>
C. JS/CSS控制图片大小自适应按钮的大小
在做网站的时候,往往图片的处理很重要,固定尺寸容易变形拉伸,不固定又会有不可预知的问题,有可能撑开页面。使用js和css将图片的现实控制在固定的蔽侍晌区域内,大于这个区域的等比例缩放,小于这个区域的居中显示。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css+js完美控制图片大小</title>
<谈早script type="text/javascript" language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 400/400){
if(image.width>400){
ImgD.width=400;
ImgD.height=(image.height*400)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
else{
if(image.height>400){
ImgD.height=400;
ImgD.width=(image.width*400)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
}
}
//-->
</script>
<style type="text/css"宏锋>
<!--
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
img {
border:0;
}
.group_head {
width:400px;
height:400px;
line-height:400px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
float:left;
margin-right:10px;
}
.group_head p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
.group_head img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
<ul class="jobGroup">
<li><a href="../group/index.php?group_id=10011"><div class="group_head"><p><img width="400" height="400" src=" http://www..com/img/_logo.gif" onload="DrawImage(this);"/></p></div></a>
</li>
</ul>
</body>
</html> PS.本文来自: http://www.code-123.com/html/2009814191245580.html
D. css中如何调整插入背景图片的大小
可以通过cover和contain来对图片进行伸缩。
语法:
background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
(4)背景图片自适应js扩展阅读:
CSS背景图片自适应、全屏、填充、拉伸
方法一:js控制
<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
</div>
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
});
</script>
方法二:全浏览器兼容
.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}
E. 使图片自适应屏幕大小的js
对小屏幕的人来说,经纯缓常有人发的图片超过你的屏幕大小,页面下面会出现一个横向滚动条,浏览起来很不方便,有的做源模网站因为排版问题,导致一行文字过长,拉伸了整个页面,都可以通过这个脚本来“修正”,让该页面更适合你的屏幕裂陆大小。
gBrowser.loadURI("javascript:(function(){function%20t(f){a=d.createNodeIterator(d,1,f,false);while(a.nextNode()){}}var%20d=document;t(function(e){x=e.offsetLeft;l=e.offsetParent;while(l!=null){x+=l.offsetLeft;l=l.offsetParent}var%20w=d.documentElement.clientWidth-x;var%20s=e.style;if(s.marginLeft)w-=s.marginLeft;if(s.marginRight)w-=s.marginRight;if(s.paddingLeft)w-=s.paddingLeft;if(s.paddingRight)w-=s.paddingRight;if(s.borderSize)w-=s.borderSize;w-=d.defaultView.innerWidth-d.documentElement.offsetWidth;if(e.tagName=='IMG'){h=e.clientHeight*w/e.clientWidth;s.maxHeight=h}s.maxWidth=w+'px'})})();");
F. 如何设置网页背景图片自适应屏幕宽度
给网页插入背景图片,并且是图片合适网页大小
<style type="text/css">
body{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="简历背景.jpg",sizingMethod="scale")
}
</style>
G. 我想在body里放一个背景图片,浏览的时候填充整个屏幕,请问这样的JS代码或CSS代码怎么写
这个是用css设置背景图片
url :"../images"表示当前目录的上级目录下的目录
no-repeat:背景图片无重复。
background-size:背景图片大小,两个百分百表示长宽都占屏幕百分百,防止网页缩放或者屏幕大小不一样时没有铺满
H. 在JS中怎样让DIV的背景图片自动适应
这个问题应该是CSS来解决吧。
I. 请问DIV 或者JS 怎么写可以让图片自适应全屏幕,哪怕1920显示器 也适应,不要背景。
图片宽度写成100%就行了啊。
另外,背景图片默认是随滚动条移动的,你是不是定义了背景图固定?
J. emlog要让背景图自适应屏幕应该怎么弄不使用插件
图片分为背景图片和通过img标签引入的图片,前者可以通过media query自动的切换不同分辨率的版本,但是在不支持background image size的浏览器中背景图片无法无级的调整大小(也就是在media query切换css的点上可以换一张不同分辨率的图,但是没法儿获得两张分辨率中间大小的版本),而且在很多情况下(比如cms中)并不适合用背景图片。
如果是img标签引入的图片,可以使用延迟加载的方式来加载,在实际加载图片之前先用js检查窗口宽度,然后加载不同分辨率的图片,比如宽度<=480,就加载80px宽度的图片,480 < 宽度 <= 768,加载120px的图片, 宽度> 768则加载160px的图片,如果宽度是600px怎么办呢,通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说,下载的图片会小一些,减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而枝液产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始,尽量使图片在各个窗口宽度下的尺寸不要相差过大,通过排布更多虚并的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来猛誉物的空间。这样可以有效的减少图片放大模糊的问题。