css基础--正文颜色和背景
2013-02-27 10:14
357 查看
使用css属性可以为一个元素的文本内容定义前景色和背景色,并且可以使用图片作为背景。css属性可以定位背景图形,可以实现连续重复背景,并且可以声明它应该相对于视点固定还是和 文档一起滚动。 1定义文字颜色 使用color属性来设置文本的前景色,默认值视客户端浏览器而定。 如:用来定义颜色为红色 div{color:#FF0000;} div{color:rgb(255,0,0);} div{color:rgb(100%,0,0);} div{color:red;} div{color:hsl(0,100%,50%);} 2.定义背景 元素的背景可以是一种颜色或者是一个图片。在box模型中,背景是指内容和衬距区域内的背景,不包含边距和边框部分。边框的颜色、样式和宽度由边框属性设定,与背景无关。由 于边距总是透明的,因此父box的背景颜色和图片可以透出来。 2.1背景颜色(background-color) background-color这个属性设置了一个元素的背景色,属性或者是一个颜色值或者是关键字transparent(透明) 2.2背景图片(background-image) background-image这个属性设置了一个元素的背景图片。设置背景图片时,也应该同时设置一个背景色一考虑背景图片不可用的情况。如果背景图片可用,它在背景色之上 得到了呈现(因此,在图片透明区域,背景色是可见的) 如:div{backround-image:url(login.png);background-color:#ccFF66;} css的背景层可以分为多层,各层上的背景相互叠加。使用background-image属性可以指定多个图片文件作为背景,只需要用逗号来分割各个图片。第一个声明的图片定位在 背景的顶层,其他图片按序在其下层排列。 2.3背景图片的大小(background-size) 这个属性用于设置背景图片的大小,可以使用关键字,也可以使用数字或百分比来指定。当使用数字或百分比值时,每一个图片都由两个值组成,使用空格隔开,前一个值 表示宽度,后一个值表示高度。 2.3.1关键字 (1)关键字contain表示将会缩放图片,在确保图片原始宽度和高度比例不变的情况下,同比例缩放到最大尺寸,以确保宽度和高度恰好适应背景定位区域。 (2)关键字conver表示将会缩放图片,在确保图片原始宽度和高度比例不变的情况下,同比例缩放到最小尺寸,以确保宽度和高度恰好覆盖背景定位区 2.3.2百分比值 百分比值是相对于背景定位区域大小而言的,属性值型如x%x%,中间有一个空格。不允许有负值 2.3.3长度值 属性值型如X X,中间有一个空格。不允许有负值 如:background-size:100px auto; 2.4背景重复方式(background-repeat) background-repeat:如果定义一个背景图片,background-repeat属性可以指定图片是否平铺(重复),以及如何平铺。所有的平铺将覆盖一个box的内容区和衬距区。 如果仅存在一个背景图片,该属性可以定义一个值,也可以定义两个值。定义两个值时,第一个表示水平方向,第二个表示 垂直方向。 background-repeat属性的属性值:no-repeat(表示背景图像不重复)、repeat(表示背景图像平铺。这是默认的初始值)、round(表示背景图像平铺,但是将会对图 像的平铺进行调整,会对图像进行缩放:如果平铺的区域不是图像幅面宽和高的倍数,就会自动缩放以达到倍数的要求。如果背景平铺区域比背景定位区大,就会填充背景平铺区域)、space (表示背景图像平铺,但是将会对图像的平铺进行调整,会在图像之间填充空白) 2.5背景滚动模式(background-attachment) 设置了背景图片,background-attachment属性指定了背景图片的滚动模式,有三个值可以选择。fixed、local、scroll (1)fixed:表示背景图片相对视点固定,视点一般就是浏览器窗口(如果使用了框架,那么还有可能是框架窗口)当滚动浏览器窗口时,元素内容滚动,但是元素 的背景不会随着滚动。元素滚动时,背景图片不会随着元素内容滚动。 (2)local:表示元素的内容如果可以滚动,背景图片随着元素内容滚动。并且当浏览器窗口滚动时,背景图片也会随着滚动。 (3)scoll:相对于元素内容固定,但是相对于视点可以滚动。 说明:无论背景图片是固定的还是可滚动的,它也只是在元素的内容和衬距区域内可见。并且,除非图片平铺,背景图片可能是不可见的,因为它滚动到内容和衬距区以外 的地方去了。 2.6背景定位(background-origin) background-origin属性定义了背景定位区域,background-origin属性的属性值及其功能。 (1)border-box:定位相对于边框区域,即从border区域就开始显示背景 (2)padding-box:定位相对于衬距区域,即从padding区域就开始显示背景。这是默认值。 (3)content-box:定位相对于内容区域,即从content区域就开始显示背景 注意:如果background-attachment属性设置为fixed,那么该属性无效。 如果background-clip属性设置为padding-box,且background-origin属性设置为border-box,background-position属设置为topleft,那么元素有一个非0的边框, 此时将对背景图片的左上角进行剪裁。 2.7背景裁剪(background-clip) 此属性定义背景呈现的区域。background-clip属性的属性值及其功能描述。 (1)border-box:在边框外边缘以内区域呈现,这不会发生剪辑,因为是最大的呈现区域。这个是初始值 (2)padding-box:在衬距外边缘以内区域呈现,即border区域内的背景将会被裁剪 (3)content-box:在内容外边缘以内区域呈现,即border区域和padding区域内的背景将会被裁剪 2.8背景图片初始位置(background-position) 此属性指定背景图片的初始位置,每个位置友两个值组成,前面一个代表水平位置,后一个代表垂直位置。后面可以跟百分比,长度值,关键字,偏移量 3.透明度 透明度(opacity)属性可以在元素级别控制透明度。与RGBA值的alpha分量类似。opacity值是0-1范围之间的数字,可以表示为百分比或者十进制。opactiy属性在所有的元素上可用。
相关文章推荐
- Css基础学习(五)—颜色、背景与图像
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- CSS基础学习2-CSS设置颜色与背景
- CSS应用基础教程(4)颜色背景
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- HTML+CSS基础 p first-letter设置所有,段落第一个字的背景颜色
- CSS基础 p first-letter设置所有,段落第一个字的背景颜色
- Css基础学习一:字体,文本,颜色,背景,边框,边距
- CSS背景颜色透明
- 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8
- css完整总结:第二篇(尺寸,外补白,内补白,边框,背景,颜色,字体,文本,文本装饰)
- JavaScript基础 为body节点下的第一个子节点p 添加style属性 添加背景颜色 firstChild setAttribute
- 通过自定义属性添加样式(css+js,动态判断背景颜色)
- CSS改变网页中鼠标选中文字背景颜色例子
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- CSS 背景颜色设置
- CSS文字被鼠标选中后的文字颜色及背景
- iOS基础:修改UINavigationController,UINavigationBar背景颜色,字体颜色
- 获取图片颜色的rgb,以供css设计背景颜色