Web开发基础-CSS-08-优快云博客

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/80766867

CSS中设置背景色及背景图片：

案例中需要的图片：background.png

airplane.png：

hero0.png :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置页面背景</title>
		<style type="text/css">
			/* 1.设置背景图 */
			body {
			
			   background:url("../images/background.png");
			   background-repeat:repeat-y;
			   background-position:center;
			   
			}
			
			.enemy {
				width:50px;
				height:50px;
				border:1px solid red;
			}
			
			.hero {
				width:125px;
				height:125px;
				border:1px solid blue;
			}
			
			div {
				margin:30px auto;
			}
			
			/* 2.采用简化的方式设置背景：
				background：背景色 背景图 重复 位置：
				上述4个值可以酌情省略，但至少要保留
				背景色或背景图之中的一个值。 */
			.enemy {
				background:
				url("../images/airplane.png")
				no-repeat center;
			}
			
			.hero {
				background:url("../images/hero0.png")
				no-repeat center;
			}
		   
		   /* 3.设置背景图是否滚动 */
		   body {
		   		background-attachment:fixed;
		   		
		   }
		   
		   .test {
		   		width:50px;
				height:50px;
				border:1px solid red;
		   		background:#0488BB;
		   }
		</style>
	</head>
	<body>
		<!-- 敌机 -->
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="test"></div>
		<!-- 英雄机 -->
		<div class="hero"></div>
		<div class="hero"></div>
	</body>
</html>

最终页面效果：【滚动页面滚动条背景图片不动 11个敌机与2英雄机会移动】