CSS学习笔记-背景属性
一、背景尺寸属性:
1、含义:
背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小
2、格式:
1.1具体像素:
background-size:300px 200px;
第一个参数:宽度
第二个参数:高度
1.2百分比:
background-size:80% 50%;
第一个参数:宽度
第二个参数:高度
1.3宽度等比拉伸:
background-size:80% auto;
第一个参数:宽度
第二个参数:高度
1.4高度等比拉伸:
background-size:auto 70%;
第一个参数:宽度
第二个参数:高度
1.5 cover:
background-size:cover;
等比放大,直至宽且高填满元素
1.6 contain:
background-size:contain;
等比放大,直至宽或高填满元素
二、背景图片定位区域属性:
1、含义:
告诉系统背景图片从什么区域开始显示,默认是从padding区域开始
2、格式:
2.1从内边距开始显示(默认):
background-origin:padding-box;
2.2从边框开始显示:
background-origin:border-box;
2.3从内容(content)区域开始显示:
background-origin:content-box;
三、背景绘制区域属性:
1、含义:
背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的,默认从border区域开始绘制背景
2、格式:
2.1从padding(默认)区域开始绘制:
background-clip:paddingbox;
2.2从border区域开始绘制:
background-clip:border-box;
2.3从content(内容)区域开始绘制:
background-clip:content-box;
四、多重背景图片
1、含义:
实现多重背景
2、格式:
(1)方法1::
background:url("images/bg1.jpg") no-repeat left top,url("images/bg2.jpg") no-repeat right top,...;
(2)方法2:
background-image:url("images/bg1.jpg"),url("images/bg2.jpg"),...;
background-repeat:no-repeat,no-repeat,...;
background-position:left top,right top,...;
3、注意点:
3.1多张背景图片之间用逗号隔开即可
3.2先添加的背景图片会覆盖后添加的背景图片
3.3建议编写多重背景的时候采用第二种方法
本节专有词语:
cover: 覆盖
contain: 包含、控制
origin: 起源、原点
clip: 剪
repeat: 重复
CSS学习笔记-背景属性的更多相关文章
- css学习_css背景属性及其应用
css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- CSS学习笔记之样式声明
目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
随机推荐
- Scrum Meeting - 第七周【Alpha阶段】
每日任务内容: 本次会议为第七次Scrum Meeting会议 本次会议项目经理召开时间为20:00,在北区男生宿舍楼召开,召开时长约10分钟,探讨了本周选课网站编写的后续工作. 小组成员 本周任务 ...
- IO测试工具 - 用于IO测试 ; linux benchmarks
IO测试工具,用于磁盘IO测试,下面进行使用列表进行记录: iozone fio dd ioping iotop iostat bonnie++ crystalDisk Atto as-ssd-ben ...
- [洛谷P1967][题解]货车运输
题目 这道题让我们求最小限重的最大值 显然可以先求出最大生成树,然后在树上进行操作 因为如果两点之间有多条路径的话一定会走最大的,而其他小的路径是不会被走的 然后考虑求最小权值 可以采用倍增求LCA, ...
- TopCoder12729 「SRM589Medium」GearsDiv1 二分图最小点覆盖
问题描述 \(N\) 个齿轮每个齿轮有颜色(RGB),有些齿轮之间会咬合,你需要删除尽量少的齿轮并给每种颜色安排方向使得咬合齿轮不同向.问最多保留多少个齿轮.保证不存在两个相同颜色的齿轮咬合. sub ...
- C++之typename和typedef关键字
1. typename的作用 template <typename Distance> class KDTreeIndex : public NNIndex<Distance> ...
- mac下使用minicom几个注意事项
一 安装: 安装是比较简单的,直接: brew install minicom 二 查找串口驱动 这里不得不吐槽苹果公司,搞一个串口,从来就不像ubuntu中那样很简洁的名字,这里的名字一般是一长串, ...
- 【nagios监控】基于linux搭建nagios监控
nagios工作原理 nagios的功能是监控服务和主机,但是其自身并不包括这些功能,所有的监控.检测功能都是通过各种插件来完成的. 启动nagios后,它会周期性的自动调用插件去检测服务器状态,同时 ...
- jquery 点击tr选中checkbox,解决checkbox的默认点击事件被阻止的问题
1.第一种,!$(event.target).is('input'),判断触发事件的元素是否为input.此时使用event.target,而不是this,获取事件本身,防止触发事件冒泡的问题 ...
- 如何让create-react-app锦上添花,满足实际需求?
目录 前端部分 后端部分 create-react-app 是 React 官方为我们提供的一个单页应用脚手架,基于 webpack 配置了相关功能,babel. 图片处理.热加载.css 模块化.c ...
- 【原创】WinForm中实现单独Time控件的方式
WinForm默认只提供了DateTimePicker,今天的项目只用时间,不能出现日期,百撕不得骑姐(^^),也没花多少时间,随便试了一下,就成功了,分享一下. 在DateTimePicker属性中 ...