您的位置:首页 > Web前端 > HTML5

更易操作的网页细节—background背景

2015-11-14 14:45 441 查看
多背景图片,你可以在一个标签元素里应用多个背景图片,代码类似于css2.0版本写法,但饮引用图片之间需用“,”逗号隔开。第一个图片是定位元素最上面的背景,后面的背景依次放在它下面显示,如下:

?




background-clip :规定背景的绘制区域(border-box背景被裁剪到边框盒,padding-box背景被裁剪到內边距框,conter-box背景被裁剪到内容框)

?




background-orgin规定背景图片的定位区域

此属性需要与background-pasition配合使用,你可以用background-position计算定位是从border、padding或content内容区域算起。

background-size 规定背景图片的尺寸

background-size:contain 让背景图片适应边框,以小的编剧为主进行填充,图片完整

?
background-size:cover 背景图片填充边框,以长的边距为准,多余的部分会被裁剪掉,图片可能不完整。

background-size:100px 100px 背景图片被缩放到这个大小

background-size:50% 100%背景图片按照这个比例缩放大小
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  图片 标签 html5