CSS怎么加背景图片？附源码！

2021-05-19 15:04:14 浏览数 (9375)

想必仔细的同学在浏览网页时，会发现有的网站并不是单纯的白色背景，而是有背景图片。那么你知道 CSS 怎么加背景图片？这篇文章告诉你。

background 属性

在学习如何添加背景图片前，我们需要先学习 background 属性。它是专门用来设置背景色或者背景图片的。

  • ​background-color​:  设置背景颜色。
  • ​background-position​:  设置背景图像的位置。
  • ​background-size​:  设置背景图片的尺寸。
  • ​background-repeat​ : 设置是否重复背景图像。
  • ​background-origin​: 设置背景图片的定位区域。
  • ​background-clip​: 设置背景的绘制区域。
  • ​background-attachment​:  设置背景图像是否固定或者随着页面的其余部分滚动。
  • ​background-image​: 设置背景图片路径。

其中设置背景图片就需要用到 ​background-image​。

background-image:url(图片路径)

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS设置背景图片 - 编程狮(w3cschool.cn)</title>
	<style type="text/css"> 
		body{
		   background: url("./image/img1.png") no-repeat;
		}
	</style>
</head>
<body>
</body>
</html>

实现效果：

CSS设置背景图片

不难发现，由于图片过小，实现效果欠佳，背景图片并不能铺满整个屏幕。在《CSS怎么设置背景图片自适应全屏？附源码！》一文中，介绍了如何设置背景图片自适应全屏，感兴趣的同学可以自行回顾，此处就不在介绍。

以上就是文章“CSS 怎么加背景图片？附源码！”的详细内容，更多 CSS 学习请前往 w3cschool。