Heim >Web-Frontend >HTML-Tutorial >使用CSS设置背景图片,图片比较大,怎么完全显示在一个DIV中?_html/css_WEB-ITnose

使用CSS设置背景图片,图片比较大,怎么完全显示在一个DIV中?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:12:151456Durchsuche

意思是图片是500*500的,而DIV是100*100,那如何设置为背景图片,并且显示图片的全部内容呢?

我在JS中是这样写的:

b.style.backgroundImage="url('1.jpg')";
b.style.width="100px";
b.style.height="100px";

图片能显示,但是没有显示完全,说明上面设置的高度与宽度没有效果

这个要如何写呢?


回复讨论(解决方案)

b.style.backgroundRepeat="repeat";

这个要用到图片拉伸了。。。

参考:

<!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中不就好了

设置下图片的css样式。
width:100px;
height:100px;

不管图片多大,都会按照这个尺寸显示。如果图片小于这个尺寸,就会被放大;大于这个尺寸,就会被缩小。

这个要用到图片拉伸了。。。

参考:

HTML code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

firefox 不支持吧。

这个是做背景图片的,设置图片的高度与宽度都没有用的。

只有2楼的有用,但是,我这个页面只需要支持WEBKIT浏览器就行了,但是,这种方法却不行,只有IE才能支持。如果有CSS3的哪个功能可以实现吗?对这个不熟悉。

OK,搞定了,谢各位兄弟。

background:url(1.jpg);
-webkit-background-size: 100px 60px;

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn