background-color | 背景颜色 |
---|---|
background-image | 背景图片 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景滚动还是固定 |
设置背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background: url("web/img/IMG_5344.JPG");
}
</style>
</head>
<body>
</body>
</html>
background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
背景平铺
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
no-repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background: url("web/img/达也.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
repeat-x:在x轴上平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background: url("web/img/达也.jpg");
background-repeat: repeat-x;
background-color: greenyellow;
}
</style>
</head>
<body>
</body>
</html>
repeat-y:在y轴上平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background: url("web/img/达也.jpg");
background-repeat: repeat-y;
background-color: greenyellow;
}
</style>
</head>
<body>
</body>
</html>
背景位置
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: url("web/img/达也.jpg");
background-repeat: no-repeat;
background-color: greenyellow;
background-position: 200px 300px;
}
</style>
</head>
<body>
</body>
</html>
100px描述的是x轴上的坐标,200px描述的是y轴上的坐标
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
背景缩放(CSS3)
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: url("web/img/达也.jpg");
background-repeat: no-repeat;
background-color: greenyellow;
background-size: 500px 500px;
}
</style>
</head>
<body>
</body>
</html>
2.通过设置cover使图片自适应屏幕,如有溢出部分则会被隐藏。(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: url("web/img/达也.jpg");
background-repeat: no-repeat;
background-color: greenyellow;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>