Skip to main content
 首页 » 学习笔记 » html5/css3

css的背景属性

2016年03月18日2068

首先说明,这只是一个设置背景的相关属性的整理,大概描述了下意思而已,用法格式什么的还有待深入。

(1) background-color:设置背景颜色。属性值为英文颜色名或是RGB颜色值。

(2) background-image:可设置背景图片。属性值可以是none或使用url(url)指定图片。当图片小于页面时自动重复,直到铺满页面。也可通过background-repeat属性设置背景图片的重复方式。background-repeat的四个值repeat、repeat-x、repeat-y、no-repeat分别表示横纵两向重复(默认值)、横向重复、纵向重复、不重复。

(3) background-position:设置背景图片在页面的位置。两个参数实现图片定位,参数值top、center、bottom实现垂直方向上的定位,参数值left、center、right实现水平方向上的定位。也可用两个px参数或百分比参数实现绝对定位。

(4) 综合属性,background:background-color || background-image || background-repeat
|| background-attachment || background-position

(5) background-clip:指定背景的显示范围,裁剪背景的位置。可设置背景的元素,结构可分为外边框、边框、内边框、内容几个部分。三个属性值border-box(默认值)、padding-box、content-box,顾名思义,分别设置从边框开始裁剪、从内边框开始裁剪、从内容开始裁剪。还有一个值是text,以背景内容(如文字)的形状作为裁剪区向外裁剪。

(6) background-origin:设置背景图片在元素中显示的起点。有三个值border-box、padding-box、content-box,分别表示设置从边框区域开始显示背景图片、从内边框区域开始显示背景图片、从内容区域开始显示背景图片。

(7) background-size:指定背景图片的尺寸。css3之前的背景图片都是以原始尺寸显示的。属性值有auto,表示为默认的原始尺寸;cover,表示为图片等比例缩小/放大到完全覆盖容器;contain,表示为图片等比例缩小/放大到宽度或高度与容器的相等。也可以设置以浮点数字或百分比设置图片的大小,可设两个值。一个值时为宽度值或宽度的百分比;两个值时则分别表示宽度和高度的值或百分比。

微信