css中background简写属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中background简写属性相关的知识,希望对你有一定的参考价值。

参考技术A 在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

background-color使用的背景颜色。

background-image使用的背景图像。

background-repeat如何重复背景图像。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-position背景图像的位置。

CSS3

background-size背景图片的尺寸。默认值:'auto'  其他值:像素,百分比,contain,cover

background-origin背景图片的定位区域。 默认值:'padding-box'         'border-box' 、'content-box'(定义背景图片绘制的开始点)

background-clip背景的绘制区域。 默认值:'border-box'      还有'padding-box'、'content-box'(定义背景绘制的开始点)

简写方式:

background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip

不设置的属性可以省略

background-Origin属性指定background-position属性应该是相对位置。

注意

1、如果背景图像background-attachment是"固定",background-origin属性没有任何效果。

2、background-origin 和background-clip很容易混淆,前者是对背景图片而言,后者是对背景而言。不是一个概念。clip默认值比origin默认值范围大,所以默认不会有裁剪效果,如果想设置裁剪,可以把origin范围设置的比clip大就好。比如:origin:'border-box',clip:'padding-box'或者'content-box'.

3、background-size中contain和cover的区别。

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。完全覆盖,可能有图片显示不完整的情况。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。可能有空白区域

如下图一设置的contain,图二设置的cover

以上是关于css中background简写属性的主要内容,如果未能解决你的问题,请参考以下文章

css常用的简写技巧_css background简写css border 简写css font属性简写等

css常用的简写技巧_css background简写css border 简写css font属性简写等

css 背景background属性的简写我看不懂意思?

css问题background的简写中background-position和background-size的顺序问题

css问题background的简写中background-position和background-size的顺序问题

Css3——background属性详解