css3:与背景的相关样式

Posted 孤岚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3:与背景的相关样式相关的知识,希望对你有一定的参考价值。

1

(1)background-origin : border-box | padding-box | content-box;(设置元素背景图片的原始起始位置。)

//需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。

 

(2)background-clip(用来将背景图片做适当的裁剪以适应实际需要。)

语法:background-clip : border-box | padding-box | content-box | no-clip

 

 

2

background-size(设置背景图片的大小,以长度值或百分比显示,还可以通过covercontain来对图片进行伸缩。)

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

//

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

 

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

 

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

 

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

 

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

//

 

 

 

3

multiple backgrounds(多重背景,也就是CSS2background的属性外加originclipsize组成的新background

的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,

而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。)

例如{background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),

                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),

                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);

    background-position: left top, 100px 0, 200px 0;

    background-repeat: no-repeat, no-repeat, no-repeat;}

 

 

以上是关于css3:与背景的相关样式的主要内容,如果未能解决你的问题,请参考以下文章

css3中与背景相关的元素

css3 - 背景与边框

css3新样式之背景

css和css3的区别

CSS3可切换背景颜色的日历控件

[CSS3]学习笔记-CSS基本样式讲解