CSS3笔记(三)背景

2018-04-15  本文已影响0人  麓语

1、回顾css2 背景属性

background-color,
backgorund-image,
background-position,
background-repeat

2、背景尺寸

background-size: 宽 高;
500px  500px
50% 50%  百分比是相对于盒子自身的宽高的
cover:覆盖   保证背景图片会等比例完全铺满盒子,不保证可以完整显示图片
contain:包含  保证背景图片等比例最大化的 在盒子中完整是显示,不保证铺满盒子

3、背景原点

background-origin:   用于指定背景图片从那个盒子开始平铺
padding-box: 默认值
border-box
content-box

4、背景裁剪

background-clip: 指定背景图片从那个盒子开始裁剪
border-box (默认值)
content-box
padding-box

4、多背景

多背景: 每个背景按照 正常的语法格式书写,多个背景之间使用逗号隔开
背景层级:先写的背景层级高,后写的层级低,通过过控制背景的属性先后顺序来控制层级;

background:
url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg3.png) no-repeat right bottom,
url(images/bg4.png) no-repeat left bottom,
url(images/baby0.jpg) no-repeat center center,
url(images/bg5.png) no-repeat center center;
上一篇 下一篇

猜你喜欢

热点阅读