css3背景图片相关

来源:互联网 发布:淘宝冷门类目有哪些 编辑:程序博客网 时间:2024/06/15 20:29

1、设置元素背景图片的原始起始位置

background-origin : border-box(从边框开始) | padding-box(从内边距开始默认)| content-box(从内容区开始);

注:背景不是no-repeat,这个属性无效,它会从边框开始显示。


2、用来将背景图片做适当的裁剪以适应实际需要。

background-clip : border-box(默认) | padding-box | content-box | no-clip

3、设置背景图片的大小

background-size: auto | <长度值> | <百分比> | cover | contain

auto:默认值,不改变背景图片的原始高度和宽度;

<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;

<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;

contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。


4、多重背景

background-image:url1,url2,...,urlN;


原创粉丝点击