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 ...
随机推荐
- CefSharp禁止弹出新窗体,在同一窗口打开链接,或者在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接
说明:在同一窗口打开链接,只要稍加改造就可以实现,这里实现的是在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接 gi ...
- JS---案例:图标跟着鼠标飞(有bug)
案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- ORA-07217 environment variable cannot be evaluated
问题描述:还是rman的问题,一个很沙雕的问题,改了半天,准备是要做数据库的全备,和归档的备份 1.连接rman进行备份,这里要保持数据库为mount状态,因为要对数据库全备 [oracle@orcl ...
- webpack-dev-server工具
webpack-dev-server来实现自动打包编译功能 // 1.npm install webpack-dev-server -D//2.和webpakc命令用法一样// 3.是本地安装的,无法 ...
- ubuntu 18.04 安装并配置adb
获取最新的adb包 wget https://dl.google.com/android/repository/platform-tools-latest-linux.zip 将软件包解压到指定位置 ...
- ASP.NET Core gRPC 入门全家桶
一. 说明 本全家桶现在只包含了入门级别的资料,实战资料更新中. 二.官方文档 gRPC in Asp.Net Core :官方文档 gRPC 官网:点我跳转 三.入门全家桶 正片: ASP.NET ...
- JavaWeb学习——web.xml文件说明
JavaWeb学习——web.xml文件说明 摘要:本文主要学习了web.xml文件的作用以及如果配置. 是什么 web.xml文件是用来在JavaWeb项目里面初始化配置信息的,比如:访问的首页.S ...
- 版本控制工具——Git常用操作
本文引自:https://juejin.im/post/5c206f1bf265da615114c15a
- vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息
一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...
- ionic项目打包+部署
环境: 1.ionic 2.angular-cli 开发 1.CTRL C + CTRL V 2.图片路径的问题 使用‘assets/xxxxx.jpg’,而不使用‘../../assets/xxx ...