继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第10天+CSS3背景 multiple backgrounds

一只杰尼龟0
关注TA
已关注
手记 24
粉丝 1
获赞 0

第一模块:十天精通CSS3 5-1、5-4大漠
第二模块:

多重背景,也就是CSS2里background的属性外加originclipsize组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

语法缩写如下:

background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式:

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意:

  1. 用逗号隔开每组 background 的缩写值;

  2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

  3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

  4. background-color 只能设置一个

举例:

有三张单独的图片:

使用多背景技术实现:

具体代码实现,查看右侧代码编辑器(12-16行)。

第三模块:http://img3.sycdn.imooc.com/632161e80001b2d718190916.jpg

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP