html文档中如何把图片作为背景

　　介绍

小编给大家分享一下html文档中如何把图片作为背景,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在html中,可以通过给身体标签设置css背景或背景图片样式来把图片作为背景,语法格式”背景/背景图片:url(“图片路径“);“。

html文档中可以使用css背景或背景图像属性将图片设置为背景,背景可以在一个声明中设置所有背景属性,背景图像指定要使用的一个或多个背景图像

背景可以设置的属性分别是:背景颜色,背景位置,background-size,平铺方式,background-origin, background-clip, background-attachment和背景图片。

各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如背景:# FF0000 url (smiley.gif);是允许的。

<强>示例:把图片作为背景

& lt; html> 　　& lt; head> 　　& lt;风格类型=拔谋?css"比; 　　身体 　　{ 　　背景:url (bg.jpg);/*背景图片:url (bg.jpg); */} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

html文档中如何把图片作为背景

这是多张图片平铺,如果想要一张图片占全屏,可以使用平铺方式属性,或在背景属性上添加没有重演值。

& lt; !DOCTYPE html> 　　& lt; html> 　　 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt;风格类型=拔谋?css"比; 　　身体{/*背景:url (bg.jpg)不再重演;*/背景图片:url (bg.jpg); 　　平铺方式:不再重演; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt; p>这是一些文本。;/p> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

html文档中如何把图片作为背景

以上是html文档中如何把图片作为背景的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

html文档中如何把图片作为背景