🍎🥦html背景_background
- 🍒1.介绍背景属性
- 🥭2.使用背景属性
🍒1.介绍背景属性
背景属性介绍：
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景滚动还是固定 |
🥭2.使用背景属性
设置背景颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性的使用</title>
<!--设置背景颜色-----》background-color-->
<style>
div{
width: 200px;
height: 200px;
background-color: #00ffff;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
设置一个宽高，然后使用background-color背景颜色 选择自己喜欢的颜色。
设置背景图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性的使用</title>
<!--设置背景图片------》background-image-->
<style>
body{
background-image: url("../imges/index.jpg");
}
</style>
</head>
<body>
</body>
</html>
效果：
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
设置平铺：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性的使用</title>
<!--设置背景颜色-----》background-color-->
<!--设置是否平铺-----》background-repeat
repeat-x平铺x轴
repeat-y平铺y轴
no-repeat只显示一张图片-->
<style>
body{
background-image: url("../imges/index.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用repeat-x效果图：
使用repeat-y效果图：
使用no-repeat(常用这个)效果图：
设置背景位置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性的使用</title>
<!--设置背景位置：background-position----》背景位置
常用：
top 顶部
bottem 底部
center 中间
-->
<style>
body{
background-image: url("../imges/index.jpg");
background-repeat: no-repeat;
background-position: 200px 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图：
设置背景是滚动还是固定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性的使用</title>
<!--设置背景是滚动的还是固定的：background-attachment----》
fixed 固定的
-->
<style>
body{
background-image: url("../imges/index.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
效果图：
🍋最后🍋
总结不易，希望小宝们不要嫌弃哦！😀
