怎样可以在html和css上插入gif图像? 我使用dw4来写html和css,gif图像是用ps来做的。

html-css026

怎样可以在html和css上插入gif图像? 我使用dw4来写html和css,gif图像是用ps来做的。,第1张

在HTML中插入图像:

<body><img src="..路径../xx.gif" /></body>

在CSS中插入背景图像:

*{background-image:url(..路径../xx.gif)}

gif图片可以用ps打开,也可以用window自带的图片和传真查看器打开,实在不行用浏览器(IE或者Firefox等等)也可以。

①:用css3rotate旋转的话,可以随时修改动画的背景色和旋转速度等,而gif只能重新修改图片再导出,但是有个缺点就是只有safari可以很好地支持,chrome下支持不是很好;

②:在比较复杂的动画,css3rotate需要通过控制多张图片,此时的代码量会很大,而是用gif图的话则不需要过多的代码;

③:在兼容性方面:css3只有高级版本的浏览器才兼容,而gif几乎所有浏览器都能够兼容。

通过css:background-image语句设置背景。

background-image 属性会在元素的背景中设置一个图像。根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。初始背景图像(原图像)根据 background-position 属性的值放置。

(1)相对的文件位置:

(2)测试代码:

测试效果:

扩展资料:

background-image 属性为元素元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

参考资料:百度百科--CSS background-image