背景颜色
background-color
-
英文单词
-
rgb(255,0,0)
-
rgba(255,0,0,0.5透明度)
-
16进制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: yellow;
background-color: rgb(255,0,0);
background-color: rgba(255,0,0);
}
.box2{
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
}
.box3{
width: 500px;
height: 500px;
background-color: #ff0000;
}
/*
背景颜色写法
1. 英文单词
2.rgb(255,0,0)
3.rgba(255,0,0,0.5透明度)
4.16进制
*/
</style>
</head>
<body>
<div>
<div class="box1">
大家好
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
背景图片定位上下左右移动
- background-repeat
- 默认平铺
- background-repeat: repeat-x;沿x轴平铺
- background-repeat: repeat-y;沿轴平铺
- background-repeat: no-repeat;不平铺
- background-position
- 20px 20px
- 10% 10%
- left center right top center bottom
调整背景图片大小
- background-size
- 400px 400px
- 100% 100%
- cover 覆盖。等比例放大图片,能放多大放多大,直到完全覆盖背景区域。
- contain 留白。把图片放大到最大尺寸,但是图片要完整展示在背景中,多余部分留白。
背景固定和滚动
- background-attachment:scroll;
- 默认scroll
- fixed 相对于整个窗口固定在左上角,不跟着背景走
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ background-color: yellow; background-image: url(/image/1.jpg); background-repeat: no-repeat; height: 3000px; width: 300px; background-attachment: fixed; margin: 0 auto; /* 默认scroll fixed 相对于整个窗口固定在左上角,不跟着背景走。 */ } </style> </head> <body> <div class="box"></div> </body> </html>
背景的复合性
背景复合写法:
1.属性中间用空格隔开
2.顺序可以换
3. 可以只取一个值,放到后边会覆盖前面的值
4.background-size只能单独使用*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 背景复合写法:
1.属性中间用空格隔开
2.顺序可以换
3. 可以只取一个值,放到后边会覆盖前面的值
4.background-size只能单独使用*/
.box1{
width: 600px;
height: 600px;
/* background-color: yellow;
background-image: url(/image/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url(/image/1.jpg) no-repeat center fixed;
}
.box2{
width: 400px;
height: 400px;
background-color: red;
background: url(/image/1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>