6.背景

最新推荐文章于 2025-02-07 13:50:01 发布

原创最新推荐文章于 2025-02-07 13:50:01 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

13 篇文章

订阅专栏

	作用
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>