- 通过CSS背景属性,可以给页面元素添加背景样式
- 背景属性可以设置
背景颜色
、背景图片
、背景平铺
、背景图片位置
、背景图像固定
等
背景颜色
background-color
属性定义了元素的背景颜色
- 一般情况下
background-color
的默认值是transparent
(透明),我们可以手动指定背景颜色为透明
背景图片
background-image
属性描述了元素的背景图像:实际开发常见于logo
或者一些装饰性的小图片
或者超大的背景图片
:优点是非常便于控制位置
精灵图
也是一种运用场景
属性值 |
作用 |
none |
无背景图片:默认值 |
url(…) |
使用绝对火相对地址指定背景图片 |
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
background-image: url("1.png");
}
</style>
</head>
<body>
<div></div>
</body>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/79fb67255954c3ccdfa54ea5a0add6cd.png)
背景平铺
- 如果需要在HTML页面上对背景图像进行平铺,可以使用
background-repeat
属性
属性值 |
作用 |
repeat |
背景图片在纵向和横向上平铺:默认值 |
no-repeat |
背景图片不平铺 |
repeat-x< |