CSS学习笔记(七) 背景
2015-01-03 15:30
246 查看
在CSS里面,每个元素盒子都可以想象成由两个图层组成。
前景层:内容(如文本或图片)和边框。
背景层:用实色填充(使用
在 CSS3 被浏览器实现之前,只能在背景颜色上添加一张图片。而现在,我们可以为背景图层添加多张图片(以及 CSS3 渐变)。
CSS背景属性:
示例:
示例:
默认情况下背景图片会 以元素左上角为起点,沿水平和垂直方向重复出现,最终填满整个背景区域。
示例:
说明:
该属性有5个关键字值,分别是
第一种情况,使用关键字来设定位置。
第二种情况,使用百分比来设定位置。
示例:
第三种情况,使用绝对或相对单位的数值。要是使用像素单位来设定位置,那么图片的左上角会被放在距离元素左上角指定位置的地方。另外,还可以使用负值,这样可以把图片的左上角定位到元素外部,从而在元素中只能看到部分图片。当然也可以给图片设定足够大的正值,把图片的右下角推到元素外部实现同样的效果。
可设定的值和含义如下:
注意:把很小的图片拉大会导致图片质量失真。
属性值有:
scroll。背景图片随元素移动。
fixed。背景图片不会随元素滚动而移动。
提示:background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印,让水印不随页面滚动而移动。
说明:声明中少写了哪个属性的值(比如没写 no-repeat),就会使用相应属性的默认值( repeat)。
示例:
提示:渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用
渐变分两种:
线性渐变。从元素的一端延伸到另一端。
放射性渐变。从元素内一点向四周发散。
示例:
transform 属性的标准语法是这样的:
由于这个属性还没有完全定案,为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性,应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明:
以下 CSS3 属性必须加 VPS:
> *针对背景图片或渐变
参考资料
CSS设计指南
前景层:内容(如文本或图片)和边框。
背景层:用实色填充(使用
background-color属性),也可以包含任意多个背景图片(使用
background-image属性),背景图片叠加在背景颜色之上。
在 CSS3 被浏览器实现之前,只能在背景颜色上添加一张图片。而现在,我们可以为背景图层添加多张图片(以及 CSS3 渐变)。
CSS背景属性:
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background(简写属性)
background-clip、background-origin、background-break(目前尚未得到广泛支持)
1.背景颜色
格式:background-color: 颜色值;
示例:
background-color: #caebff;
2.背景图片
格式:background-image:url(图片路径/图片文件名);
示例:
background-image:url(images/blue_circle.png);
默认情况下背景图片会 以元素左上角为起点,沿水平和垂直方向重复出现,最终填满整个背景区域。
3.背景重复
格式:background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例:
background-repeat:repeat-x;
说明:
repeat默认值,水平和垂直方向都重复,直至填满元素的背景区域为止。
repeat-x水平方向重复。
repeat-y垂直方向重复。
no-repeat任何方向上都不重复(只让背景图片显示一次)。
4.背景位置
用于控制背景位置的background-position属性,是所有背景属性中最复杂的。
该属性有5个关键字值,分别是
top、
left、
bottom、
right和
center,这些关键字中的任意两个组合起来都可以作为该属性的值。
background-position属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下,
background-position的原点位于左上角。
第一种情况,使用关键字来设定位置。
background-position属性的默认值
top、
left控制着水平和垂直方向重复的起点。如修改 起点位置:
p#center {background-position:center center;}(简化写法:
background-position:center,设定一个关键值,则另一个也会取相同的值。),背景图片就会以段落的中心点为起点。
第二种情况,使用百分比来设定位置。
示例:
background-position:50% 50%;,再把
background-repeat设定为
no-repeat,就能实现了图片在背景区域内居中的效果。第一个值表示水平位置,第二个值表示垂直位置。要是只设定一个值,则将其用来设定水平位置,而垂直位置会被设为
center。
第三种情况,使用绝对或相对单位的数值。要是使用像素单位来设定位置,那么图片的左上角会被放在距离元素左上角指定位置的地方。另外,还可以使用负值,这样可以把图片的左上角定位到元素外部,从而在元素中只能看到部分图片。当然也可以给图片设定足够大的正值,把图片的右下角推到元素外部实现同样的效果。
5.背景尺寸
background-size是 CSS3 规定的属性,用来控制背景图片的尺寸。
可设定的值和含义如下:
50%:缩放图片,使其填充背景区的一半。
100px 50px:把图片调整到 100 像素宽,50 像素高。
cover:拉大图片,使其完全填满背景区;保持宽高比。
contain:缩放图片,使其恰好适合背景区;保持宽高比。
注意:把很小的图片拉大会导致图片质量失真。
6.背景粘附
background-attachment属性控制滚动元素内的背景图片是否随元素滚动而滚动。
属性值有:
scroll。背景图片随元素移动。
fixed。背景图片不会随元素滚动而移动。
提示:background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印,让水印不随页面滚动而移动。
7.简写背景属性
示例:body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
说明:声明中少写了哪个属性的值(比如没写 no-repeat),就会使用相应属性的默认值( repeat)。
9.多背景图片
CSS3 可以给元素背景添加多个背景图片。示例:
p { background: url(images/turq_spiral.png) 30px -10px no-repeat, url(images/pink_spiral.png) 145px 0px no-repeat, url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75; }
10.背景渐变
渐变,就是在一定长度内两种或多种颜色之间自然的过渡。提示:渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用
background-image属性,也可以使用简写
background属性。
渐变分两种:
线性渐变。从元素的一端延伸到另一端。
放射性渐变。从元素内一点向四周发散。
11.厂商前缀
为鼓励浏览器厂商尽早采用 W3C 的 CSS3 推荐标准,于是就产生了 VSP(Vendor Specific Prefixes,厂商前缀)的概念。示例:
transform 属性的标准语法是这样的:
transform: skewX(-45deg);
由于这个属性还没有完全定案,为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性,应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明:
-moz-transform:skewX(-45deg); /* Firefox */ -webkit-transform:skewX(-45deg); /* Chrome 及 Safari */ -ms-transform:skewX(-45deg); /* 微软 Internet Explorer */ -o-transform:skewX(-45deg); /* Opera */ transform:skewX(-45deg); /* 最后是 W3C 标准属性 */
以下 CSS3 属性必须加 VPS:
border-image translate
linear-gradient transition
radial-gradient background*
transform background-image*
transform-origin
> *针对背景图片或渐变
参考资料
CSS设计指南
相关文章推荐
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- CSS学习笔记之背景属性
- 背景图像和图像替换--Css学习笔记(三)
- html css学习笔记-背景与文字
- CSS学习笔记04 背景
- CSS学习笔记(三)背景
- CSS学习笔记(五)背景图基础
- CSS学习笔记11 CSS背景
- CSS学习笔记(八)CSS 背景
- CSS学习笔记-----简单的列表和背景图片
- [置顶] HTML入门学习笔记--CSS背景和精灵图(5)
- 【HTML5学习笔记】24:CSS背景
- HTML入门学习笔记--CSS 3D转换模块和背景相关(12)
- 学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
- CSS学习笔记-附加篇( 新浪大通栏Tab样式)
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- CSS学习笔记-附加篇(web标准化设计:常用的CSS命名规则)
- css学习笔记(3)图文混排 分级 鼠标
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- CSS入门学习笔记[1]