1. div里面的背景,怎么缩放到和div大小一样
CSS3已经可以满足你的要求,写法如下:
div{background-size:50px 50px;height:50px;width:50px;}
但这种写法低版本的浏览器(如IE6等)是不支持的,只能处理图片到需要的尺寸了。
如你补充的问题就简单了,不需要CSS3,直接设置背景图片:
body{background:url(图片路径) no-repeat scroll 50% 0;}
no-repeat不平铺
50%左右居中
0居顶
这里面的值根据实际需要进行设置就可以了。
2. 如何使背景图片随着div的大小进行缩放
没有这样的办法。除非变通一下,用绝对定位,进行两个层的叠放。
3. div+css如何改变背景图片大小
主要有以下几种方法:
1-把图片放在div的背景图里,再利用css3的background-size属性,语法:
background-size:length|percentage|cover|contain;
这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。
2-如果是有规律变化的图,可以将图片单独切出来,然后repeat-x或者repeat-y进行平铺,也是一个不错的方法,而且图片可以切得不用那么大,也对图片进行充分利用。
3-将图片写在img标签里,然后对图片和div进行相对定位/绝对定位,效果是图片尺寸不会随浏览器缩放而变化,但是如果有竖直滚动条时,图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。
4. div+css 如何让背景图片横向缩小
不可能。
作为背景的图片,其长宽尺寸不能控制,只能控制其显示出来的大小以及位置。
如果担心加载速度,那就少用图片,或者尽量压缩图片,或者使用小容量的图片,同时尽量使用平铺等CSS规则。非有必要不必更换背景图片。
5. div 背景图片的大小怎么调整成适应div区域的大小,是背景图片哦
position-size: 100% 100%;
不过ie低版本不支持此属性。可以把背景换成Img标签,做个浮动即可,绝对没有其他问题
6. div+css怎么让背景图片自动缩放
.imgDiv{
width:500px;
height:500px;
background-image:url('../images/index.jpg');
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat9;
background-image:none9;
(此处空一行)
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')9;
}
(6)div中的背景图片如何设置缩放扩展阅读:
css控制背景图片自动伸缩自适应的小技巧
例子如下:
.picLUp{
background:url(logo.png)no-repeat;
width:100%;height:40%;
background-size:100%100%;
}
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled:
可选项,布尔值(Boolean),设置或检索滤镜是否激活。true | false
true:
默认值,滤镜激活。
false:
滤镜被禁止。
sizingMethod:
可选项,字符串(String),设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
7. 在html中如何设置div的的大小当图片尺寸超过div设置的大小的时候自动缩放,不适用img
具体步骤如下:
1、首先,先在代码中输入position:fixed; top: 0; left: 0;这样的作用是让整个图片固定在屏幕上。