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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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取整数函数常用的四种方法小结
2012/07/05 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JS分页效果示例
2013/10/11 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
解决python 无法加载downsample模型的问题
2018/10/25 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
销售行政专员职责
2014/01/03 职场文书
网页美工求职信
2014/02/15 职场文书
小学生安全责任书
2014/07/25 职场文书
个人股份合作协议书
2014/10/24 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
党支部审查意见
2015/06/02 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python