您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第六课 如何设置CSS背景

 skeeter | Div+css教程 | 2010-3-14 | 231点击 | 0评论

相信您已经充分掌握了CSS的基础，学习的路上总是艰苦的！但请记住！你并不孤单！从这一课起，我们将真正开始领略CSS的魅力所在！这一课将学习,如何设置CSS背景,如何设置css背景色,如何设置css背景图片,背景重复等CSS背景相关知识

相信您已经充分掌握了CSS的基础，学习的路上总是艰苦的！但请记住！你并不孤单！
从这一课起，我们将真正开始领略CSS的魅力所在！准备好了吗？出发吧！


CSS 可以用纯色做背景，也可以使用背景图像创建更为复杂的效果。


这也说明了CSS的能力远远在 HTML 之上。


--------------------------------------------------------------------------------


背景色


可以使用 background-color属性 为HTML元素设置背景色
下面这条规则把元素的背景设置为绿色：


p {background-color:green;}


background-color属性 默认值 是transparent。也就是“透明”。也就是说，如果一个THML元素没有指


定背景颜色，那么背景就是透明的，这样其下层元素的背景才能看见。

 


--------------------------------------------------------------------------------


背景图片


可以使用 background-image属性 使用图片作为背景。


background-image 属性的 默认值 是none，表示背景上没有任何图像。


如果需要设置一个背景图像，必须为这个属性设置一个图片的URL值：


body {background-image: url('bg2.gif');}


body是整页的背景，而你可以为行内元素或者部分区域设置背景，而不影响到其他部分。

更甚者你可以为textareas、input、select等元素设置背景，但并不是所有用户都能很好的处理这些。


注意：background-image 包括所有背景属性都不能使用css继承。


--------------------------------------------------------------------------------


背景重复


可以使用 background-repeat属性 在页面上对背景图片进行重复。


repeat-x 和 repeat-y 值分别代表图像只在水平方向或垂直方向上重复


no-repeat 则不允许图像在任何方向上平铺，也就是如果该HTML元素的高宽超过了背景图片的高宽，那么


超过的地方将留空。


默认情况下背景图像将从一个元素的左上角开始。请看下面的例子：

.repeaty{ background-image: url('bg2.gif');background-repeat: repeat-y; height:200px; }


--------------------------------------------------------------------------------


背景定位


可以使用 background-position属性 改变图像在背景中的位置。


下面的例子在 body 元素中将一个背景图像居中放置：

.pos

{

background-image:url('bg2.gif');

background-repeat:no-repeat;

background-position:center;

height:200px;

}


background-position 属性 提供了很多可选择值：top、bottom、left、right 和 center，这些值也可以成对使用。

如：top left，就是将图片放置在左上的意思，值的放置次序不分先后。

还可以使用长度值，如100px 或 5cm，或者使用百分数值。


--------------------------------------------------------------------------------


百分数值


CSS还提供了百分数值来定义值，假设你希望用百分数值将图像在其元素中居中：

.pre

{

background-image:url('bg2.gif');

background-repeat:no-repeat;

background-position:50% 50%;

height:200px;

}


百分数值 其实是图片中心与其元素中心对齐。换句话说，百分数值同时应用于元素和图像。图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
background-position 属性的默认值是 0% 0%，在功能上相当于 top left。这就是为什么默认的总是从元素的左上角开始平铺。


--------------------------------------------------------------------------------


长度值


长度值是指图片在X、Y上轴的偏移。偏移点是图像的左上角。

比如，如果设置值为 10px 30px，图像的左上角将在元素左上角向右10像素、向下30像素的位置上：

.length

{

background-image:url('bg2.gif');

background-repeat:no-repeat;

background-position:10px 30px;

height:200px;

}


注意：长度值 与 百分数值不同，偏移指的是从元素左上角到图片左上角的X、Y轴距离。

关键字:如何设置CSS背景,如何设置css背景色,如何设置css背景图片,背景重复,div+css入门教程

上一篇:第五课 如何使用CSS样式表？下一篇:第七课 什么是CSS文本

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net