CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016-03-07 11:32
585 查看
背景裁剪
用于指定background是否包含content之外的border,padding。默认值为border-box,即background从包含border在内的地方开始渲染,IE的默认表现也等同于border-box
背景从border(即包括border在内)开始绘制(渲染)
背景从padding(即包括padding在内)开始绘制:
背景从content(即内容部分)开始绘制:
将背景裁剪作为文本的填充色:
背景图片位置
以border(即包括border)为原点计算背景图的background-position:
以padding(即包括padding)为原点计算背景图的background-position:
以content(即从content开始)为原点计算背景图的background-position:
图片背景尺寸
用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto
数值表示方式:
百分比表示方式:
等比扩展图片来填满元素,即cover值:
等比缩小图片来适应元素的尺寸,即contain值:
以图片自身大小来填充元素,即auto值:
background-clip:border-box|padding-box|content-box|text
用于指定background是否包含content之外的border,padding。默认值为border-box,即background从包含border在内的地方开始渲染,IE的默认表现也等同于border-box
背景从border(即包括border在内)开始绘制(渲染)
#background-clip-border{ -moz-background-clip:border-box; /* For Firefox */ -webkit-background-clip:border-box; /* For Chrome, Safari */ -o-background-clip:border-box; /* For Opera */ -ms-background-clip:border-box; /* For IE */ background-clip:border-box; /* For Future */ }
背景从padding(即包括padding在内)开始绘制:
#background-clip-padding{ -moz-background-clip:padding-box; /* For Firefox */ -webkit-background-clip:padding-box; /* For Chrome, Safari */ -o-background-clip:padding-box; /* For Opera */ -ms-background-clip:padding-box; /* For IE */ background-clip:padding-box; /* For Future */ }
背景从content(即内容部分)开始绘制:
#background-clip-content{ -moz-background-clip:content-box; /* For Firefox */ -webkit-background-clip:content-box; /* For Chrome, Safari */ -o-background-clip:content-box; /* For Opera */ -ms-background-clip:content-box; /* For IE */ background-clip:content-box; /* For Future */ }
将背景裁剪作为文本的填充色:
/* 如果你的浏览器支持text值,你将会看到本段文字的颜色直接使用了背景颜色:红色,且背景将被裁剪掉不再显示 */ #background-clip-text{ background-color:#f00; -webkit-text-fill-color:transparent; -webkit-background-clip:text; /* For Chrome, Safari */ background-clip:text; /* For Future */ }
背景图片位置
background-origin:border-box|padding-box|content-box
以border(即包括border)为原点计算背景图的background-position:
#background-origin-border{ -moz-background-origin:border-box; /* For Firefox */ -webkit-background-origin:border-box; /* For Chrome, Safari */ -o-background-origin:border-box; /* For Opera */ -ms-background-origin:border-box; /* For IE */ background-origin:border-box; /* For Future */ }
以padding(即包括padding)为原点计算背景图的background-position:
#background-origin-padding{ -moz-background-origin:padding-box; /* For Firefox */ -webkit-background-origin:padding-box; /* For Chrome, Safari */ -o-background-origin:padding-box; /* For Opera */ -ms-background-origin:padding-box; /* For IE */ background-origin:padding-box; /* For Future */ }
以content(即从content开始)为原点计算背景图的background-position:
#background-origin-content{ -moz-background-origin:content-box; /* For Firefox */ -webkit-background-origin:content-box; /* For Chrome, Safari */ -o-background-origin:content-box; /* For Opera */ -ms-background-origin:content-box; /* For IE */ background-origin:content-box; /* For Future */ }
图片背景尺寸
background-size:[length|percentage|auto]{1,2}|cover|contain
用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto
数值表示方式:
#background-size{ background-size:300px 100px; }
百分比表示方式:
#background-size2{ background-size:40% 80%; }
等比扩展图片来填满元素,即cover值:
#background-size3{ background-size:cover; }
等比缩小图片来适应元素的尺寸,即contain值:
#background-size4{ background-size:contain; }
以图片自身大小来填充元素,即auto值:
#background-size5{ background-size:auto; }
相关文章推荐
- 网页添加CSS样式表的四种方法
- 用CSS3的box-reflect设置文字倒影效果的方法讲解
- js+css实现模态层效果
- 下拉菜单被挡住问题
- CSS中!important的使用
- CSS3的弹性盒模型
- CSS中的position和display通俗理解
- CSS 值的解析
- 通用样式表
- 谷歌官方两种下拉刷新样式SwipeRefreshLayout(横线样式、圆圈样式)
- HTML+CSS D07 边框、div
- CSS折腾集——选择器
- CSS name
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
- CSS清浮动处理(Clear与BFC)
- iOS实现书架布局样式【一些电子书的首页】
- 1.修改文字的样式
- CSS浮动(float,clear)通俗讲解
- CSS清浮动
- 合理的布局,绚丽的样式,谈谈Winform程序的界面设计