当前位置:首页 » 图片知识 » div中的背景图片如何设置缩放
扩展阅读
女生和渣男搞笑图片 2023-08-31 22:07:09
嘻嘻长什么样图片 2023-08-31 22:06:10

div中的背景图片如何设置缩放

发布时间: 2022-12-22 14:44:23

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;这样的作用是让整个图片固定在屏幕上。