1.1背景颜色
属性名:background-color(bgc)
属性值:
注意:默认背景颜色是透明的
background-color:rgba(); rgba是红绿蓝三原色,a是透明度0-1
例子:rgba(0,0,0,0.5)
2.1背景图片
属性名:background-image(bgi)
属性值:background-image: url();
3.1背景平铺
属性名:background-repeat(bgr)
属性值:
取值 | 效果 |
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
4.1背景位置
属性名:background-position(bgp)
属性值:background-position:水平方向位置 垂直方向位置
正数:向右向下移动;负数:向左向右移动
注意:背景色和背景图只在盒子里显示
5.1背景相关属性连写
属性名:background(bg)复合属性(一个属性连接各个值,值中间用空格隔开)
书写顺序: 推荐 :background:color image repeat position
<!DOCTYPE html>
<html lang="en">
<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:pink url(./ceKCaW2HTWg8w.jpg) no-repeat center bottom ;
/* 背景图位置是数值时x,y顺序不能颠倒 */
background:pink url(./ceKCaW2HTWg8w.jpg) no-repeat 100px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.1(拓展)img标签和背景图片的区别
要写背景图需要盒子有高度,否则背景图不显示
img叫插入图(用来实现网页中比较重要的图片),background叫背景图