《HTML+CSS+JS 网页制作》- 背景样式

栏目: CSS · 发布时间: 8年前

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

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

背景颜色样式background-color

在CSS中设置背景的颜色是通过background-color样式的,其语法为:

background-color:颜色取值

其中这个颜色取值跟前一章节学的color样式的取值是一样的,即用十六进制数来设置颜色。

例如:

<!doctype html>
<html>
	<head>
		<title>背景样式</title>
		<meta charset="utf-8">
		<style>
			body{background-color:#0099CC;}
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
		</style>
	</head>
	<body>
		<div class="word">通通学 - 知识学习与分享的平台</div>
	</body>
</html>

效果:

《HTML+CSS+JS 网页制作》- 背景样式

背景图像样式background-image

在网页设计时,需要背景图像来美化网页,此时就需要用到background-image样式,语法:

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

注意:图像的地址可以是绝对地址,也可以是相对地址

例如:

<!doctype html>
<html>
	<head>
		<title>背景样式</title>
		<meta charset="utf-8">
		<style>
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background-image:url('./image.jpg');}
		</style>
	</head>
	<body>
		<div class="word">通通学 - 知识学习与分享的平台</div>
	</body>
</html>

效果:

《HTML+CSS+JS 网页制作》- 背景样式

背景重复样式background-repeat

通过background-repeat样式可以设置图像是否平铺,同时可以设置平铺方式,语法:

background-repeat:取值

该取值分别有以下情况:

no-repeat:表示背景图像不平铺;

repeat:表示背景图像平铺满整个网页;

repeat-x:表示背景图像只在水平方向平铺;

repeat-y:表示背景图像只在垂直方向平铺。

例如:

<!doctype html>
<html>
	<head>
		<title>背景样式</title>
		<meta charset="utf-8">
		<style>
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background-image:url('./image02.png');background-repeat:repeat-x;}
		</style>
	</head>
	<body>
		<div class="word">通通学 - 知识学习与分享的平台</div>
	</body>
</html>

效果:

《HTML+CSS+JS 网页制作》- 背景样式

背景的复合样式background

背景的复合样式background就是将上述的3个样式,一起写在一个样式上,简化样式方式,语法:

background:取值

注意:取值是包括背景颜色、背景图像、背景重复样式,各值之间用空格隔开。

例如:

<!doctype html>
<html>
	<head>
		<title>背景样式</title>
		<meta charset="utf-8">
		<style>
			.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
			body{background:#0099CC url('./image02.png') no-repeat;}
		</style>
	</head>
	<body>
		<div class="word">通通学 - 知识学习与分享的平台</div>
	</body>
</html>

效果:

《HTML+CSS+JS 网页制作》- 背景样式

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

《HTML+CSS+JS 网页制作》- 背景样式 《HTML+CSS+JS 网页制作》- 背景样式

关注微信公众号

《HTML+CSS+JS 网页制作》- 背景样式


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法分析

数据结构与算法分析

韦斯(Mark Allen Weiss) / 机械工业出版社 / 2010-8 / 45.00元

《数据结构与算法分析:C语言描述》曾被评为20世纪顶尖的30部计算机著作之一,作者在数据结构和算法分析方面卓有建树,他的数据结构和算法分析的著作尤其畅销,并受到广泛好评,已被世界500余所大学选作教材。 在《数据结构与算法分析:C语言描述》中,作者精炼并强化了他对算法和数据结构方面创新的处理方法。通过C程序的实现,着重阐述了抽象数据类型的概念,并对算法的效率、性能和运行时间进行了分析。 ......一起来看看 《数据结构与算法分析》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具