| 作用 | |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 是否平铺 |
| background-attachment | 背景滚动还是固定 |
| background-position | 背景位置 |
缩写: background:颜色 图片地址 是否平铺 是否滚动 位置
背景颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style type="text/css">
div{
width:400px;
height:200px;
background-color:#0FC;
}
</style>
</head>
<body>
<div>这是一段文字</div>
</body>
</html>
背景位置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景位置</title>
<style type="text/css">
div.c1{
width:3000px;
height:1000px;
background-color:#0FC;
background-image:url(../image/0.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center top;
}
div.c2{
width:3000px;
height:1000px;
background-color:#0FC;
background-image:url(../image/0.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:100px 200px;
}
</style>
</head>
<body>
<!--后面接方位名词,有top,bottom,right和left四个-->
<!--填一个时默认另一个居中-->
<!--后面也可以接px,但四是必须先x轴再y轴-->
<div class="c1">接方位名词</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="c2">接像素</div>
</body>
</html>
背景图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style type="text/css">
div.c1{
width:1950px;
height:360px;
background-color:#0FC;
background-image:url(../image/0.jpg);
}
div.c2{
width:3000px;
height:2000px;
background-color:#0FC;
background-image:url(../image/0.jpg);
}
div.c3{
width:3000px;
height:2000px;
background-color:#0FC;
background-image:url(../image/0.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="c1">原本的测量好的图片</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="c2">如果没有测量好,且没设置是否平铺</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="c3">设置不平铺后</div>
</body>
</html>
背景透明
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style type="text/css">
.c1{
width:30px;
height:20px;
background:rgba(1000,100,10,1);
}
.c2{
width:30px;
height:20px;
background:rgba(1000,100,10,0.1);
}
.c3{
color:rgba(1000,100,10,0.1);
}
</style>
</head>
<body>
<div class="c1">1</div>
<br>
<div class="c2">0.5</div>
<br>
<div class="c3">可以将rgba用于改变字体颜色</div>
<!--后面为红 绿 绿 透明度-->
<!--颜色为三个颜色值的混合-->
<!--透明度:1为不透明,0为全透明-->
<!--rgba可以用于改变字体色和边框,背景色-->
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
