CSS设置背景图片及背景颜色示例

1.设置背景颜色

background-color是CSS中的背景颜色属性，这个属性用于为HTML元素设定背景颜色，可以设置整个网页的背景颜色，也可以设置网页中某部分元素的背景颜色，比如表格背景颜色、层背景颜色等等。

示例1：
这段代码设置整个网页的背景颜色为蓝色#0080FF
<style type="text/css">

</style>

2.设置背景图片

（1）background-image是CSS中的背景图片属性，这个属性用于为HTML元素设定背景图片，可以设置整个网页的背景图片，也可以设置网页中某部分元素的背景图片，比如表格背景图片、层背景图片等等。

示例2：
这段代码设置整个网页的背景图片，网页和图片可以存放在不同的网站空间内，背景图片既横向重复又竖向重复。
<style type="text/css">

</style>

示例3：
如果网页和图片存放在同一个网站空间内，图片位于images目录下，示例1的代码也可以用图片的相对路径写法：
<style type="text/css">

</style>

（2）background-repeat是CSS中的背景重复属性，这个属性通常与background-image一起使用，控制背景图片的重复显示方式，属性值包括：
· repeat-x 背景图片横向重复
· repeat-y 背景图片竖向重复
· no-repeat 背景图片不重复

示例4：
这段代码设置网页的背景图片，背景图片仅竖向重复。
<style type="text/css">

</style>

示例5：
这段代码设置网页的背景图片，背景图片仅横向重复。
<style type="text/css">

</style>

示例6：
这段代码设置网页的背景图片，背景图片不重复。
<style type="text/css">

</style>

（3）background-attachment是CSS中的背景附着属性，这个属性通常与background-image一起使用，控制背景图片是跟随网页内容滚动，还是固定不动，属性值包括：
· scroll（缺省值）
· fixed

示例7：
这段代码设置网页的背景图片，背景图片不重复，且不随网页内容滚动。
<style type="text/css">

</style>

（4）background-attachment是CSS中的背景位置属性，这个属性通常与background-image一起使用，控制背景图片的最初位置。

示例8：
这段代码设置网页的背景图片，背景图片不重复，随网页内容滚动，背景图片的初始位置距网页最左边50px，距网页最顶端30px。
<style type="text/css">

</style>

（4）background是CSS中的背景属性，这个属性是个综合属性，可以把以上种种单独定义的背景属性合并在一起，简化代码，不同背景属性之间用空格间隔。

示例9：
这段代码设置网页的背景颜色为蓝色#0080FF，背景图片不重复，且不随网页内容滚动，背景图片的初始位置距网页最左边50px，距网页最顶端30px。
<style type="text/css">

</style>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。