如何在HTML中用CSS对图片进行缩放

html-css022

如何在HTML中用CSS对图片进行缩放,第1张

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例:

html+css在图片上添加文字有两种方法如下:

1.添加一个DIV,采用绝对定位,图片所属DIV为基准

<div style="position:relativewidth:100pxheight:100px">

<img src="" alt="" />

<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">

文字

</div>

</div>

第二种方法:图片作为背景图片

<div style="background:url(abc.jpg) no-repeat left top">

wenzi

</div>

背景图片现在有了,然后在上面写上你需要写的字就可以了。

首先要将下载好的图片放入css文件夹中;

在CSS中,可以使用background-image属性或background属性来插入图片。background-image属性或background属性可以为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。具体代码如下:

<div id="bgimg"></div>

#bgimg {

background: #333 url(图片路径) center center no-repeat

}

第一个参数,图片底层的背景颜色,第二个参数,图片路径,第三个参数,图片上下的相对位置(其他参数left,right),第四个参数,图片左右的相对位置(top,bottom),第五个参数,图片的重复(其他参数 repeat,repeat-x,repeat-y)