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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 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 导出Excel示例分享
2014/08/18 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python银行系统实战源码
2019/10/25 Python
什么是Python中的顺序表
2020/06/02 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
小学社会实践活动总结
2014/07/03 职场文书
工作后的感想
2015/08/07 职场文书
社区结对共建协议书
2016/03/23 职场文书