HTML如何设置背景图片？有几种设置背景图片的办法？

日期: 2022-10-16 11:36:14

方法一、HTML中设置背景图片

HTML中的<body></body>标签内可直接设置背景图片。具体代码如下：

<body background="图片路径">

直接用<body></body>设置背景图片的话，浏览器会根据你图片的大小，铺满整个屏幕。若不想平铺图片，还需要进行另外的 CSS 设置。此方法较为麻烦。

方法二：CSS 设置背景图片

CSS 设置背景图片的方式与 HTML 设置背景图片的方式大体一致，具体代码如下：

<style type="text/css">     body{     background: url("图片地址");              } </style>

到目前为止，图片还是会重复铺满整个屏幕。

我们需要在进行添加 CSS 样式进行优化。

<style type="text/css"> body{ background: url("图片地址") no-repeat center center fixed;                 /*兼容浏览器版本*/                 -webkit-background-size: cover;                 -o-background-size: cover;                                 background-size: cover; } </style>

可以通过给body标签设置css background或background-image样式来把图片作为背景，语法格式“background/background-image:url("图片路径");”。

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); 是允许的。

这是多张图片平铺，如果想要一张图片占全屏，可以使用background-repeat属性，或在background属性上添加no-repeat值。

<style type="text/css">
	body{
		background: url("https://img.alicdn.com/imgextra/i4/1881288151/O1CN01yJN7T42A5D7JHXaaN_!!1881288151.png") no-repeat center center fixed;
                /*兼容浏览器版本*/
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
	}
	</style>

上一篇：如何在不影响排名的情况下给老网站添加新的关键

下一篇：网络建设的流程分享保证合理性和最优性