在html中,可以通过给body标签设置css background或background-image样式来把图片作为背景,语法格式“background/background-image:url("图片路径");”。
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/11/FRjABv.jpg?x-oss-process=style/syzhong)
(推荐教程:html教程)
html文档中可以使用css background或background-image属性将图片设置为背景,background可以在一个声明中设置所有背景属性,background-image指定要使用的一个或多个背景图像
background可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 URL(smiley.gif); 是允许的。
示例:把图片作为背景
<html>
<head>
<style type="text/css">
body
{
background: url(bg.jpg) ;
/*background-image: url(bg.jpg);*/
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>
效果图:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/11/BZJVfq.png?x-oss-process=style/syzhong)
这是多张图片平铺,如果想要一张图片占全屏,可以使用background-repeat属性,或在background属性上添加no-repeat值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
/*background: url(bg.jpg) no-repeat;*/
background-image: url(bg.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>
效果图:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/11/Q32qYr.png?x-oss-process=style/syzhong)
更多编程相关知识,请访问:编程课程!!
以上就是html文档中怎么把图片作为背景?的详细内容,更多请关注爱上源码网其它相关文章!
微信
分享
相关标签:html css background
本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
- 上一篇:深入了解HTML中的编码规范
- 下一篇:利用html实现进度条效果的方法
相关文章
相关视频
- jsp和html的区别是什么?
- php如何转换成html
- 谈谈HTML标签元素中alt和title属性的区别
- 分享三款美观的html按钮样式
- css如何实现对号效果
- css如何控制元素的显示与隐藏
- 如何利用HTML5 canvas旋转图片?(实例演...
- 来优化 小程序中的css treeshaking
- php如何将html转成word
- html文档中怎么把图片作为背景?
- HTML5中新增加的标签
- HTML5的高级功能介绍
- 使用CSS3文本属性
- 使用CSS3过渡属性
- 使用CSS3动画属性
本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~ |