CSS学习笔记-background属性

平常总是使用background的缩写形式,忽视了各属性的细节在此进行总结。

background-attachment

W3C:属性设置背景图像是否固定或者随着页面的其余部分滚动。

属性值:

scroll   默认值。背景图像会随着页面其余部分的滚动而移动。

fixed    当页面的其余部分滚动时,背景图像不会移动。

inherit  规定应该从父元素继承 background-attachment 属性的设置。

background-position

W3C:属性设置背景图像的起始位置。其中第一个值为水平位置,第二个值为垂直位置。

假设容器宽高为500px,250px,图片宽高均为100px:

使用px等长度单位定位时,图片的左上角以容器左上角为基准(包括padding)进行偏移。如background-position:50px 100px

使用百分比定位时,偏移的计算公式为:(容器的宽度-图片的宽度)x value。例如background-position:50% 50%

使用关键词定位,可选关键词有left、center、right、top、bottom,分别对应的0 50% 100%。

注:

1.使用的时候background-repeat:no-repeat;

2.若偏移太大,则超出部分将会隐藏;

3.使用百分比和长度单位定位时可以使用负值;

4.若只指定了一个值,那么另一个值为50%(center);

5.当background-attachment:scroll时,background-position是相对于容器内容及内边距左上角定位的(如上图),而当background-attachment:fixed时,背景定位是根据body的padding-box的左上角定位的,如图(同样是background-position:50px 100px):

background-repeat

W3C:属性设置是否及如何重复背景图像。

属性值:

repeat     默认。背景图像将在垂直方向和水平方向重复。

repeat-x   背景图像将在水平方向重复。

repeat-y   背景图像将在垂直方向重复。

no-repeat  背景图像将仅显示一次。

inherit    规定应该从父元素继承 background-repeat 属性的设置。

background-image

W3C:属性为元素设置背景图像。

默认值为none,需要设置的时候使用url(‘URL‘)。(若使用相对路径,则路径为相对于写此属性的文件)

background-color

W3C:属性设置元素的背景颜色。

元素背景的范围:

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

属性值:

color_name  规定颜色值为颜色名称的背景颜色(比如 red)。

hex_number  规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

rgb_number  规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。

transparent 默认。背景颜色为透明。

inherit     规定应该从父元素继承 background-color 属性的设置。

以下为CSS3新添属性:(IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持。

background-clip

W3C:属性规定背景的绘制区域。

属性值:

border-box  默认。背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

background-origin

W3C:属性相对于什么位置来定位。

属性值:

padding-box 默认。背景图像相对于内边距框来定位。

border-box  背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。

注:当background-attachment:fixed时,无效。(本人测试,是相对于body的padding-box定位的)

background-size 

W3C:属性规定背景图像的尺寸。

属性值:

length      设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

percentage  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

cover       把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain     把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

这里区分以下cover和contain:(background-attachment:scroll)

background-size:cover                                             background-size:contain

很明显,当值为cover时,目的是填充满容器,而当值为contain时,是背景图不溢出容器时能覆盖的最大面积。

当设置了background-position属性进行偏移时,相当于先进行background-size确定大小,后进行偏移,如图(background-position:50px 100px)

background-size:cover                               background-size:contain

当background-attachment:fixed时,容器变为body。

最后,为了简便,可以使用background简写声明所有的background属性,例如:

background: transparent url(black-block.jpg) no-repeat scroll 50px 100px border-box padding-box;

属性顺序:

background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip

注:

1.顺序能够替换,但注意当background-origin和background-clip相同时,先出现的设置为background-origin;

2.background-size属性,我一加上就报错,不知为何。

总的来说,CSS3这些新增属性赋予了我们更多控制背景的能力。

本文参考http://www.w3school.com.cn/,并结合自己的测试。若有错误,恳请指正!

如果您觉得这文章对您有帮助,请点击【推荐一下】,想跟我一起进步么?那就【关注】我吧!

时间: 2024-10-28 09:12:43

CSS学习笔记-background属性的相关文章

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border