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 ...
随机推荐
- 基于Vue的前后端分离项目实践
一.为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...
- 查看python版本多少位的
正常我们在cmd终端输入python之后,如果有安装python,就会在回车之后出来关于你安装的python版本信息,几版本,多少位的,但是还有一种,像我这样只显示了python版本是3.7.5,并没 ...
- Cross-Site Scripting:Persistent 跨站点脚本:持久性
- C# 读写倍福plc beckhoff , 使用ADS协议实现读取plc
本文将使用库技术来读写倍福PLC数据,使用的是基于以太网的ADS实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能读写操作 github地址:https://g ...
- SpringBoot系列-整合Mybatis(注解方式)
目录 一.常用注解说明 二.实战 三.测试 四.注意事项 上一篇文章<SpringBoot系列-整合Mybatis(XML配置方式)>介绍了XML配置方式整合的过程,本文介绍下Spring ...
- 在 ASP.NET Core 中启用跨域请求(CORS)
本文介绍如何在 ASP.NET Core 的应用程序中启用 CORS. 浏览器安全可以防止网页向其他域发送请求,而不是为网页提供服务. 此限制称为相同源策略. 同一源策略可防止恶意站点读取另一个站点中 ...
- 针对windows系统如何解决openssl_pkey_export(): cannot get key from parameter 1这个问题
为了解决这个问题我百度了很多方法,可是很多方法并没有效果. 方法一: 如果你安装的是phpstudy这个集成环境,那么 1.你就要去php拓展里面去打开php_opemssl中打开这个扩展. 2.去p ...
- python判断文件夹和文件是否存在
1.os.path.exists()既可以判断文件是否存在,又可以判断文件夹是否存在 2.os.path.isfile()判断文件是否存在 3.os.path.isdir()判断文件夹是否存在
- MSSQL一个关于Count函数的小实例
--创建测试表 if object_id(N'T_Test',N'U') is null CREATE TABLE [dbo].[T_Test] ( , ) PRIMARY key NOT NULL, ...
- Java_map的key为自定义对象
首先自定义Key对象 import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; import java ...