signed

QiShunwang

“诚信为本、客户至上”

08 背景设置

2021/6/3 16:09:09   来源:

1 背景颜色 background-color

默认情况下,背景颜色background-color:transparent; 表示无颜色,透明色。


2 背景图片

参数值作用
repeat背景图像在纵向和横向上平铺
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeate-y背景图像在纵向上平铺

 

背景平铺设置:background-repeat:repeat;

背景图片设置 background-image:none (默认情况下)

通常情况下,background-image:url(路径);

小试牛刀:以此表示no-repeat;repeat;repeat-x; repeat-y.

   

  

代码展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>背景</title>
		<style type="text/css">
			div {
			width: 800px;
			height:800px;
			/* 平铺 */
			/* 页面可以添加背景颜色也可以添加背景图片,但是背景图片在背景颜色的上方. */
			background-color: aliceblue;
			background-image: url(../image/aoteman.jpg);
			/* 表示不平铺 */
			/* background-repeat: no-repeat; */
			/* 表示平铺 */
		/* 	background-repeat: repeat; */
			/* 表示演x平铺 */
			/* background-repeat:repeat-x; */
			/* 表示演y平铺 */
			background-repeat:repeat-y;
		}
		</style>
		
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

3 背景方位

通过css背景属性,可以给页面元素添加背景样式;背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

背景图片位置    background-position: x   y;

精确定位:background-position: 20px  50px;

混合模式:background-position:center 20px;

参数值说明
length百分数|由浮点数字和单位标识符组成的长度值
positiontop、center、bottom、left、center、right

 

实际案例:

          

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>背景</title>
		<style type="text/css">
			div {
			width: 800px;
			height:800px;
			/* 平铺 */
			/* 页面可以添加背景颜色也可以添加背景图片,但是背景图片在背景颜色的上方. */
			background-color: aliceblue;
			background-image: url(../image/aoteman.jpg);
			background-repeat: no-repeat;
			/* 方位 */
		/* 	background-position: center right; */
			background-position: top left;
		}
		</style>
		
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

4 案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英雄联盟背景</title>
		<style type="text/css">
			h1 {
				font-weight: 400;
				background-image: url(../image/default.png);
				background-repeat: no-repeat;
		/* 		背景位置居中靠左 */
				background-position: center left;
				/* 文字缩进2.5em */
				text-indent: 2.5em;
			}
		</style>
	</head>
	<body>
		<h1>亲爱的召唤师,欢迎登陆</h1>
	</body>
</html>

5 案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英雄联盟背景</title>
		<style type="text/css">
			body {
				background-image: url(../image/YJH.jpg);
				background-position: top center;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>


6 背景固定

固定:   background-attachment: fixed;          字体滚动,图片固定

滚动:   background-attachment: scroll;    (默认) :字体和图片一块滚动


7  背景属性的简洁写法

background: 背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置;

中间用空格隔开

background: #FF0000 url(../image/YJH.jpg) repeat fixed top center;


8 css的背景

颜色背景半透明的效果

background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度,取值介于0到1之间,0表示完全无颜色,1表示全颜色

background-color:balck;  相当于background: rgba(1,1,1,1);