CSS学习笔记(七) 背景
在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学习笔记(背景)
CSS背景 1.background-color:背景色: 例如:background-color: #000; 外部链接 :CSS颜色表 2.background-image:背景图片: 例如:ba ...
- HTML及CSS学习笔记 13 - 背景
本文是HTML及CSS课程的第十三课.主要介绍和页面背景相关的CSS样式属性,如背景颜色.背景图片.背景图片平铺方式等等 文章目录 一.web中的图片 1.web中常见的图片格式 1.1.JPEG 1 ...
- CSS学习笔记七---定位 精灵图
一:知识点 1:定位属性用法总结 2:绝对定位---参照物是浏览器的第一屏 a:没有父盒子,或者父盒子没有定位 相对于浏览器左上角位置来定位 b:父盒子有定位 相对于父盒子来定位,子绝父相 以下为注: ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 吴恩达《机器学习》学习笔记七——逻辑回归(二分类)代码
吴恩达<机器学习>学习笔记七--逻辑回归(二分类)代码 一.无正则项的逻辑回归 1.问题描述 2.导入模块 3.准备数据 4.假设函数 5.代价函数 6.梯度下降 7.拟合参数 8.用训练 ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- CSS学习笔记——精灵图(sprite)
CSS学习笔记目录 一.什么是精灵图? 二.精灵图的优点 三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现 总结 一.什么是精灵图? 所谓精灵图就是图片 ...
- window的dos命令学习笔记 七
文章目录 一.dos历史学习笔记(后期整合到这里,我想能学到这里的应该不多了,嘿嘿,加油) 二.执行状态返回值(`%errorlevel%`,和shell中`$?`相似): 三.视窗 1.color ...
最新文章
- R语言row.names函数为dataframe、matrix设置行名称实战
- 磁盘管理命令:du df
- unslider调用配置选项
- 第二阶段团队冲刺10
- 【期望】路径长度(金牌导航 期望-1)
- 智能家居逐渐融入AI技术 向大众市场扩张仍需时间
- ros melodic 版本sudo rosdep init和rosdep upgrade失败的解决办法
- nodejs/pomelo 使用 mongodb 连接 mongo时 出现
- 全国行政区划变更 (2010~2019)
- linux 脚本加密工具下载,linux truecrypt 加密工具
- 解决GitHub上的博客无法被百度收录的问题
- Github多人协作
- SPSS基础操作(一):用幂指数型的权函数建立加权最小二乘回归方程
- python语言应用 智慧树满分章节测试答案_Python语言应用完整智慧树网课章节测试答案...
- win10系统桌面图标变为白色方框和去除桌面图标快捷方式小箭头的方法
- 管理 Office com 加载项
- Qt version is not properly installed,please run make install
- 笔记本win10正在更新怎么关闭计算机,教你win10如何关闭自动更新
- tensorflow安装过程-(windows环境下)---详解
- SG-UAP平台 : MX框架总结
热门文章
- linux下编译lisbusb,关于 qt 移植到 omap3530 总结
- c语言可重入函数和不可重入函数
- this version of the Java Runtime only recognizes class file versions up to 52.0 (unable to load clas
- 深度学习基础系列| Global Average Pooling是否可以替代全连接层?
- 8年测试经验,耗时一星期整理的40道自动化测试面试题(附精准答案),爆肝2W字..........
- 安全管理,以及证书申请
- 约瑟夫问题的java简单算法
- NodeJs编写小爬虫
- TextKit YYText
- 吃瓜教程task02 第3章 线性模型