1.background-origin 背景的起始位置
background-origin: border-box || padding-box || content-box;
案例初始化:
代码:
效果: 设置的盒子存在 border padding content(用户设置的width height)
 
(1) background-origin: border-box; 设置背景图片的起始位置从border开始
效果:
(2)background-origin: content-box; 设置背景图片的位置从用户设置的内容区开始放置
效果:
(3)background-origin: padding-box(默认值); 设置背景图片的位置从padding(内边距)开始放置
效果:
 
2.background-clip 背景裁剪
background-clip: border-box | padding-box | content-box | no-clip
案例初始化:
代码:
效果:背景图片默认不裁剪 案例设置了背景图片的起始位置 为boder部分开始 背景颜色为绿色 背景图片
(1) background-clip: padding-box; 保留padding + content 部分的背景图片将padding以外的背景图片裁剪掉
效果:
(2)background-clip: content-box; 保留content 部分的背景图片将content以外的背景图片裁剪掉。
效果:
(3)background-clip: border-box; 保留border以内的背景图片将border以外的背景图片裁剪掉。
效果:
(4)background-clip: no-clip(默认值); 不裁剪背景图片。
效果:
 
注意: border-box和no-clip 的效果相同 但是含义不同
 
3. background-size 背景图片大小
属性: background-size: cover || contain || 百分比 || 像素值
不写background-size属性的案例:
代码:
 
效果:
 
(1). 添加background-size:cover的效果
cover: 覆盖 图片会按照指定比例放大或缩小的填充, 放大缩小的比例取决于图片的宽 : 放置的盒子的内容区的宽 和 图片的高 : 放置在盒子的内容区的高 的大小的取较大的一个。
 
(2). background-size: contain
contain: 包含 , 图片会按照指定比例扩大或缩小的填充,放大缩小的比例取决于 图片的宽 : 放置的盒子的内容区的宽 和 图片的高 : 放置在盒子的内容区的高 的大小的 取较小的一个。
 
(3). background-size: 一个具体像素值/百分比 (以100px为例)
一个具体像素值(若是百分比则表示相对于可显示区的大小) 代表的是图片的宽度扩大或缩放到该像素值, 而图片的宽高比是不变的
 
(4). background-size: 两个具体像素值 /百分比 (以100px 100px为例)
两个具体像素值(若是百分比则表示相对于可显示区的大小) 代表的是图片的宽度和高度分别缩放或扩大到指定像素值, 图片的宽高比取决于设置的像素比

欢迎加入web前端冲击顶级高薪大厂学习群,群聊号码:820269529

Css3新增背景属性的更多相关文章

  1. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  2. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS3新增的属性有哪些:

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  4. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  5. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  6. CSS3新增基础属性总结——20160409(易达客)

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

  7. CSS3 的背景属性

    ㈠background-size 属性 ⑴background-size 属性规定背景图片的尺寸. ⑵在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的.在 CSS3 中,可以规定背景图片的尺 ...

  8. Css3 新增的属性以及使用

    Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...

  9. css3新增的属性

    由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz-       firefox火狐 -ms-         IE ...

随机推荐

  1. 面试笔试(C++部分)

    1.define 和const,inline的区别 define的缺点: 1.边界效应(必须加括号,才能避免边界效应) #define MUL(A,B) A*B 而在使用的时候,这样的调用: ,b=, ...

  2. CSS3 文本溢出问题

    一.单行: 效果: 实现这各效果必须要加上: text-overflow: ellipsis; /*文本溢出*/ overflow: hidden; /*配合使用:溢出隐藏*/ white-space ...

  3. Hibernate 初识

    第一步: 导包:(这是我根据其他网站的介绍导入的包,可能不完善,但开发没什么问题,遇到问题再说) 当然还有mysql的jar包 第二步:进行hibernate环境配置 在classpath目录下建立h ...

  4. (STM32F4) IAP程式碼實現

    IAP學習, 主要想了解實際上程式碼放在不同的Flash位置如何轉跳且執行. 我的應用程序只做了Pin12, Pin13 LED閃爍來分辨我的 App1 跟 App2的程式碼 App1 程式碼 int ...

  5. 吴裕雄 python 机器学习——K均值聚类KMeans模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import cluster from sklearn.metrics ...

  6. JavaWeb学习笔记(十五)—— 使用JDBC进行批处理

    一.什么是批处理 批处理就是一批一批的处理,而不是一个一个的处理! 当你有10条SQL语句要执行时,一次向服务器发送一条SQL语句,这么做效率上很差!处理的方案是使用批处理,即一次向服务器发送多条SQ ...

  7. ONTAK2010 Peaks加强版(离线&在线)

    题面 弱化版:luogu 强制在线版:bzoj 题解 本题有两种解法 离线算法:线段树合并 先看一道简单题[USACO18JAN]MooTube 本题就是在此基础上求第\(k\)高的点 首先把询问和路 ...

  8. 怎么在vue中引入layui

    新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/la ...

  9. 文献综述十四:基于Oracle11g的超市进销存管理系统设计与实现

    一.基本信息 标题:基于Oracle11g的超市进销存管理系统设计与实现 时间:2016 出版源:技术创新 文件分类:对数据库的研究 二.研究背景 为超市设计开发的超市管理系统,采用的是 VC+ Or ...

  10. 移动工程后,打开ROM核无配置信息

    问题: 从他人处下载的ISE工程,打开dw51的ROM IP核,无配置信息,为block memory generator的初始配置,并显示无法找到coe文件 原因:ROM配置过程中的部分内容丢失导致 ...