CSS 3之背景图片

最新推荐文章于 2024-01-10 20:26:17 发布

菇毒

最新推荐文章于 2024-01-10 20:26:17 发布

阅读量761

点赞数

分类专栏： web 前端学习 # CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125363213

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

背景图片

1. 添加背景图片
2. 设置背景图片位置

1. 添加背景图片

使用 background-image 属性能设定标记的背景图片，在中使用，将图片置于整个主体中；
语法格式如下所示：

background-image:none | url (url)

默认属性时无背景图，当要使用背景图时可用 url 进行导入；url 可以使用绝对路径或相对路径；

例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景图片</title>
		<style>
			body{
				background-image: url(3.jpg);
			}
		</style>
	</head>
	<body>
		<p>可爱的小猫</p>
	</body>
</html>

20220508

2. 设置背景图片位置

使用 background-position 属性能调整背景图片位置；
background-position 属性用于指定背景图片在页面中所处的位置；该属性值能分为4类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值与水平对齐值；
垂直对齐值包括top、center与bottom，水平对齐值包括left、center与right；
20220508 例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景位置设定</title>
		<style>
			body{
				background-image: url(6.gif);
				background-repeat: no-repeat;
				background-position: top right;
			}
		</style>
	</head>
	<body>
	</body>
</html>