风吟资源网 - 免费提供正版软件、活动线报、优质教程以及其他网络资源,欢迎大家踊跃投稿

css的背景属性

风吟资源网 学习笔记

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

(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,表示为图片等比例缩小/放大到宽度或高度与容器的相等。也可以设置以浮点数字或百分比设置图片的大小,可设两个值。一个值时为宽度值或宽度的百分比;两个值时则分别表示宽度和高度的值或百分比。

 

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们处理。敬请谅解!

我要评论0条评论
禁止发布淫秽、反动、广告评论、乱填写QQ,发现永封IP!
  • 全部评论(0
    还没有评论,快来抢沙发吧!