CSS的background属性及CSS3的背景图片设置总结


Posted in HTML / CSS onJune 13, 2016

在css中,共有如下几个background属性

属性 描述 CSS
background 在一个声明中设置所有的背景属性。 1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-color 设置元素的背景颜色。 1
background-image 设置元素的背景图像。 1
background-position 设置背景图像的开始位置。 1
background-repeat 设置是否及如何重复背景图像。 1
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

从表格中,我们可以看出 background-clip ,background-origin和 background-size是css3中新增的属性。
CSS Code复制内容到剪贴板
  1. `background`-`clip`:border-box | padding-box | content-box | no-clip  

用来确定背景的裁剪区域。
引擎类型 Gecko Webkit Presto:

CSS Code复制内容到剪贴板
  1. background-clip -moz-background-clip -webkit-background-clip -o-background-clip  

注:本属性不支持IE6,7,8
一张图看懂三个属性值的区别:
CSS的background属性及CSS3的背景图片设置总结

CSS Code复制内容到剪贴板
  1. background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain   

cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain :把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

CSS Code复制内容到剪贴板
  1. background-origin : border | padding | content   

取值:
border: 从border区域开始显示背景。
padding: 从padding区域开始显示背景。
content: 从content区域开始显示背景。
CSS的background属性及CSS3的背景图片设置总结

CSS3的背景图片设置
1. 背景图片起始位置 background-origin

background-origin
border-box 边框
padding-box 内边距(默认值)
content-box 内容区域

background-origin : border-box | padding-box | content-box;
注意: 背景必须设为no-repeat
2. 背景图片裁剪 background-clip

background-clip
border-box 边框(默认值)
padding-box 内边距
content-box 内容区域
no-clip 不裁剪,与border-box效果相同

3. 设置背景图片的大小 background-size

background-size
auto 默认值,不改变背景图片的原始高度和宽度
长度值 成对出现如200px 50px, 只设置一个值, 等比例缩放
百分比 0%~100%之间的任何值, 只设置一个值, 等比例缩放
cover 覆盖, 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain 容纳, 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
HTML / CSS 相关文章推荐
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 #HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 #HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 #HTML / CSS
浅析css3中matrix函数的使用
Jun 06 #HTML / CSS
You might like
PHP操作文件方法问答
2007/03/16 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
替换python字典中的key值方法
2018/07/06 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Python实现自动签到脚本功能
2020/08/20 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
公司清洁工岗位职责
2013/12/14 职场文书
新领导上任欢迎词
2014/01/13 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
工程催款通知书
2015/04/17 职场文书
实习指导老师意见
2015/06/04 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle