使用CSS设置背景图片,图片比较大,如何完全显示在一个DIV中
使用CSS设置背景图片,图片比较大,怎么完全显示在一个DIV中?
意思是图片是500*500的,而DIV是100*100,那如何设置为背景图片,并且显示图片的全部内容呢?
我在JS中是这样写的:
b.style.backgroundImage="url('1.jpg')";
b.style.width="100px";
b.style.height="100px";
图片能显示,但是没有显示完全,说明上面设置的高度与宽度没有效果
这个要如何写呢?
------解决方案--------------------
b.style.backgroundRepeat="repeat";
------解决方案--------------------
这个要用到图片拉伸了。。。
参考:
意思是图片是500*500的,而DIV是100*100,那如何设置为背景图片,并且显示图片的全部内容呢?
我在JS中是这样写的:
b.style.backgroundImage="url('1.jpg')";
b.style.width="100px";
b.style.height="100px";
图片能显示,但是没有显示完全,说明上面设置的高度与宽度没有效果
这个要如何写呢?
------解决方案--------------------
b.style.backgroundRepeat="repeat";
------解决方案--------------------
这个要用到图片拉伸了。。。
参考:
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>ٲ</title> <style type="text/css"> .divBox { width:100px; height:100px; border:solid 1px red; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flashbutton.gif' ,sizingMethod= 'scale' ); background-repeat: no-repeat; background-positon: 100%, 100%; } </style> </head> <body> <div class="divBox">test...</div> </body> </html>
------解决方案--------------------
你先用格式工厂将图片转换成100*100的,然后再写到div中不就好了
------解决方案--------------------