美文网首页
CSS3笔记(三)背景

CSS3笔记(三)背景

作者: 麓语 | 来源:发表于2018-04-15 15:02 被阅读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;

相关文章

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • CSS3 背景

    @(HTML5)[背景] [TOC] 三、CSS3背景 CSS背景属性回顾 背景单个属性 background-i...

  • CSS3笔记(三)背景

    1、回顾css2 背景属性 2、背景尺寸 3、背景原点 4、背景裁剪 4、多背景

  • 前端技术前沿5

    CSS3 背景CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。 background-sizebac...

  • CSS3 背景

    CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制。在本章您将了解以下背景属性: backgro...

  • CSS3 背景

    1、CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: back...

  • CSS背景

    CSS3 背景 CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。 在本章,您将学到以下背景属性: b...

  • CSS-背景5-多张背景图

    1、多张背景图 CSS3可以选择多张背景图,每张背景图都可以独立设置尺寸、定位。下面我们使用CSS3的多张背景图,...

  • CSS giao点东西!

    #CSS3多背景图之间的层叠关系 CSS3 multiple background-image多背景图之间的层叠关...

  • CSS3 背景

    CSS3 背景 CSS3 background-origin 属性 background-origin 属性规定背...

网友评论

      本文标题:CSS3笔记(三)背景

      本文链接:https://www.haomeiwen.com/subject/uubdkftx.html