CSS学习笔记 | CSS背景
CSS背景
本文内容:
CSS背景:1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图片固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结
通过CSS背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
1、背景颜色
background-color
属性定义了元素的背景颜色。
background-color: 颜色值;
一般情况下,元素背景颜色默认值是transparent
,是透明的。
2、背景图片
background-image
属性描述了元素的背景图片,实际开发常见于 logo 、一些装饰性的小图片或是超大的背景图片,优点是非常便于控制位置。
background-image: url | none ;
参数值 | 作用 |
---|---|
url | 背景图片的绝对或相对地址 |
none | 无背景图片(默认值) |
3、背景平铺
background-repeat
可以实现对背景图片平铺的控制。
background-repeat: repeat | no-repeat | repeat-x | repeat-y ;
参数值 | 作用 |
---|---|
repeat
|
背景图片在纵向和横向上平铺(默认值) |
no-repeat
|
不平铺 |
repeat-x
|
在横向上平铺 |
repeat-y
|
在纵向上平铺 |
4、背景图片位置
设置background-position
属性可以改变图片在背景中的位置。
background-position: x y;
x 、y代表的是 x 坐标和 y 坐标,可以使用方位名词或者精确单位。
参数值 | 说明 |
---|---|
length
|
百分数 | 由浮点数字和单位标识符组成的长度值 |
position
|
top | center | bottom | left | right 方位名词 |
如果参数是方位名词
如果指定的两个值都是方位名词,则两个值的位置顺序可以互换,不影响显示效果。
比如,right top 和 top right 效果是一样的
如果只指定了一个值,那么省略的另一个值默认为居中 center
如果参数是精确单位
- 那么第一个值肯定是 x 坐标,第二个值肯定是 y 坐标,有严格的顺序
- 如果只指定了一个数值,那么该数值一定是 x 坐标,另一个默认垂直居中
如果参数是混合单位
- 则第一个值是 x 坐标,第二个值是 y 坐标
5、背景图像固定(背景附着)
background-attachment
属性可以设置背景图片是否固定或者随着页面的其余部分滚动。
后期可以制作视差滚动的效果。
background-attachment: scroll | fixed;
参数 | 作用 |
---|---|
scroll
|
背景图片随对象内容滚动 |
fixed
|
背景图片固定 |
6、背景复合写法
为了简化背景属性的代码,可以将这些属性合并简写在同一个属性background
中,从而节约代码量。
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
7、背景色半透明
background: rgba(0,0,0,0.3);
注意:
- 最后一个参数是
alpha
透明度,取值范围在 0 ~ 1 之间,0 代表100%透明,1代表不透明 - 我们习惯把 0.3 的 0 省略掉,写为
background: rgba(0,0,0,.3);
- 背景半透明是指盒子背景半透明,盒子里面的内容不受影响
- CSS3 新增的属性,IE9+ 版本浏览器才支持
- 但是在实际开发中,我们不太关注兼容性写法了,可以放心使用
8、背景总结
属性 | 作用 | 值 |
---|---|---|
background-color
|
背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image
|
背景图片 | url(图片路径) |
background-repeat
|
背景平铺 |
repeat no-repeat repeat-x repeat-y
|
background-position
|
背景位置 | length / position 分别是 x 和 y 坐标 |
background-attachment
|
背景附着 |
scroll(背景滚动) fixed(背景固定)
|
背景简写 | 减少代码量 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; |
背景色半透明 | 背景色半透明 |
background: rgba(0,0,0,0.3); 后面必须是4个值
|
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
返回目录:笔记首页
CSS学习笔记 | CSS背景相关推荐
- CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
- 【温故知新】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学习笔记(七) 背景
在CSS里面,每个元素盒子都可以想象成由两个图层组成. 前景层:内容(如文本或图片)和边框. 背景层:用实色填充(使用 background-color 属性),也可以包含任意多个背景图片(使用 ba ...
- CSS 学习笔记——CSS Selector
CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body {/*对 body 元素定义样式*/ }body,div {/*同时选择多种 ...
- 2016/8/2 CSS学习笔记 css 字间距、CSS字体间距、css 字符间距
1.text-indent设置抬头距离css缩进 即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离,字 ...
- CSS学习笔记(详细,不定期更新)
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- 我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解 一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
最新文章
- Linux学习之CentOS(七)--CentOS下j2ee环境搭建
- 下方点击出项上方对应的插件_你的PPT里装了几个插件?我赌你不知道TA!
- 六:Cocos2d-x的CCLayer
- 阿里巴巴集团2014秋季校园招聘笔试题
- treeset java_Java TreeSet pollLast()方法与示例
- 感谢党,软考过了。系统集成项目管理project师
- stm32f7网口_STM32F7串口通信问题
- 快手与央视达成合作:除夕晚8点上快手看春晚
- hdu2063+hdu1083(最大匹配数)
- IO流(1)--文件流及其原理
- linux下tomcat热部署,怎样将项目部署到Linux上tomcat热部署
- 一个简单的多线程实现
- 用 python+tkinter+有道云API 写一个自用的背单词软件
- 趣味密码学入门--cryptohack
- TB6612FNG电机驱动模块的简单使用
- 先序、中序、后序、递归序(重要)
- powershell免杀可替换的关键字
- 罗马音平假名中文可复制_如何快速有效地学习日语五十音?
- 3.17√ 识别次读入的一个以@为结束符的字符序列是否为形如”序列1序列2“模式的字符序列 ,序列12均没有,且序列2为序列1的逆序列
- TCP IP学习笔记① 互联网通信过程