1 背景色
<!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>
div{
width: 300px;
height: 200px;
/* background-color: pink; */
/* background-color: #abc; */
/* 红绿蓝三原色，a是透明度0-1 */
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div>ahhaha</div>
</body>
</html>
2 背景图片 背景平铺 背景位置
<!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>
/* background-image(bgi) 背景图 */
/* background-image:url('图片路径') */
div{
width: 800px;
height: 800px;
background-color: pink;
background-image: url(../2css基础/四百.png);
/* bgr背景平铺 */
/* 默认repeat沿xy方向平铺 */
/* background-repeat: repeat; */
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/*bgp背景位置 background-position: 0 0; */
/* background-position: right bottom; 右下 */
/* background-position: 200px 200px; 像素位置 */
/* background-position: -50px 200px; */
/* center中间 top上面 bottom底部 */
/* left左 right右 center中间 */
}
</style>
</head>
<body>
<div>我有背景图</div>
<p>hahahaha</p>
</body>
</html>
3 背景属性连写
<!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>
p{
/* 属性连写 */
/* 不分顺序：背景色，背景图，背景平铺，背景位置
背景位置是数值表示的话先写的表示水平后面的表示垂直 */
width: 800px;
height: 800px;
background: green url(./四百.png) no-repeat center center;
}
</style>
</head>
<body>
<p>哈哈哈</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
