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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 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学习笔记之 函数声明
2011/06/09 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
js实现选项卡效果
2020/03/07 Javascript
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
关于爱情的广播稿
2014/01/16 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
汽车转让协议书范本
2014/12/07 职场文书
世界遗产的导游词
2015/02/13 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
公司人事管理制度
2015/08/05 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android