html背景不重复-《HTML+CSS+JS网页制作》-背景样式

内容简介：《HTML+CSS+JS网页制作》-背景样式

本章介绍与背景相关的几个重要样式，分别是背景颜色样式background-color、背景图像样式background-image、背景重复样式background-repeat、背景复合样式background。

背景颜色样式 背景颜色

背景的颜色在CSS中通过background-color样式设置，其句型为：

background-color:颜色取值

这个颜色的值和上一章学习的颜色样式的值是一样的，即用十六进制补数来设置颜色。

例如：

	
		
		
		
			body{background-color:#0099CC;}
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
		
	
	
		
通通学 - 知识学习与分享的平台
	

功效：

背景图像样式background-image

在设计网页时，需要背景图片来美化网页。 这时候就需要使用background-image样式了。 句型：

background-image:url(图像的地址)

注意：图片的地址可以是绝对地址也可以是相对地址

例如：

	
		
		
		
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background-image:url('./image.jpg');}
		
	
	
		
通通学 - 知识学习与分享的平台
	

功效：

背景重复样式背景重复

通过background-repeat样式可以设置图片是否平铺html背景不重复，也可以设置平铺的形式。 句型：

background-repeat:取值

数值如下：

no-repeat：表示背景图片不平铺；

Repeat：表示背景图片覆盖整个网页；

Repeat-x：表示背景图像仅水平方向平铺；

Repeat-y：表示背景图像仅垂直平铺。

例如：

	
		
		
		
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background-image:url('./image02.png');background-repeat:repeat-x;}
		
	
	
		
通通学 - 知识学习与分享的平台
	

功效：

复合风格背景为背景

背景的复合风格背景就是将以上三种风格写在一种风格上html背景不重复，简化风格形式，句型：

background:取值

注意：值包括背景颜色、背景图片和背景重复样式，每个值之间用空格分隔。

例如：

	
		
		
		
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background:#0099CC url('./image02.png') no-repeat;}
		
	
	
		
通通学 - 知识学习与分享的平台
	

功效：

如果您觉得我的文章对您有用，请随意打赏。 您的支持将激励我继续创作！