CSS3的背景
来源:互联网 发布:淘宝网工程抢险车警灯 编辑:程序博客网 时间:2024/06/07 10:13
(1)background-origin
background-origin:设置元素背景图片的原始起始位置。
语法:background-origin: border-box |padding-box | content-box;
参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
(2)background-clip
background-clip:用来将背景图片做适当的裁剪以适应实际需要。
语法:background-clip: border-box |padding-box | content-box | no-clip
参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
(3)background-size
background-size:设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
语法:background-size:auto | <长度值> |<百分比> | cover |contain
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
(4)multiple backgrounds
多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。
语法缩写如下:
background : [background-color]| [background-image] | [background-position][/background-size] |[background-repeat] | [background-attachment] | [background-clip] |[background-origin],...
可以把上面的缩写拆解成以下形式:
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position :position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment :attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意:
1)用逗号隔开每组 background 的缩写值;
2)如果有 size 值,需要紧跟position 并且用 "/" 隔开;
3)如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
4)background-color 只能设置一个。
附:以上内容整理自慕课网
- css3的背景坐标
- CSS3的背景
- CSS3背景属性和CSS3的渐变
- css3的background-clip 背景
- CSS3打造磨砂玻璃的背景
- CSS3 背景图像的位置
- CSS3背景
- css3背景
- CSS3--背景
- CSS3 背景
- CSS3-背景
- css3背景
- CSS3背景
- CSS3背景
- css3实现背景渐变的方法
- css3.0实现背景旋转的方法
- CSS3:元素的边框、背景和大小
- css3中新增的背景属性
- android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
- ReactiveCocoa学习之创建信号
- oracle中sysdate时间的加减
- 2017-4-17
- 背景建模算法
- CSS3的背景
- Apache下的FileUtils.listFiles方法简单使用技巧
- 微信网页开发
- 【SPFA模板】nyoj1274 信道安全 9th河南省赛;
- HEVC集成
- scrollview原理
- LEETCODE60. Permutation Sequence
- iOS开发系列----UI(简单TableView的使用)
- ASP.NET TextBox输入时触发OnTextChanged事件