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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 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中date()日期函数有关参数整理
2011/07/19 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
jquery编写日期选择器
2017/03/16 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
八一建军节活动方案
2014/02/10 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
团队队名口号大全
2014/06/06 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
环境卫生标语
2015/08/03 职场文书