首页 > Web开发 > 详细

[2016-01-17][CSS][背景相关的属性]

时间：2016-01-17 18:54:57 阅读：117 评论：0 收藏：0 [点我收藏+]

标签：

[2016-01-17][CSS][背景相关的属性]

背景相关的属性

background-coclor设置背景颜色
background-image 设置背景图片

background-image:"图片url";
background-image:none;无,默认值
background-image:inherit;继承父元素

background-repeat:设置是否以及何如重复背景图像

background-repeat:repeat;默认,背景图片在水平和垂直反向重复
background-repeat:repeat-x;背景图像在水平方向重复
background-repeat:repeat-y;背景图像在垂直方向重复
background-repeat:no-repeat;背景图像仅显示一次
background-repeat:inherit;继承父级元素

background-position:设置图像的开始位置

有两个值,第一个值描述x,第二值描述y

left 左
right 右
center 中
top 顶
bottom 底

如果只规定了一个值,另一个值默认是 center

x% y%

如果只规定了一个值,另一个值默认是50%

xpx ypx

如果只规定了一个值,另一个值默认是50%(没错不是px是%)

background-attatchment:设置背景图像是否随着页面的其他部分移动

background-attatchment:scroll 默认值,移动
background-attatchment:fixed 固定
background-attatchment:inherit 继承父元素

background-clip 规定背景的绘制区域

background-clip:border-box;背景被裁剪到边框盒
background-clip:padding-box;背景被裁剪到内边距边框
background-clip:content-box;背景被裁剪到内容框

background-origin 规定background-position属性是相对什么位置来定位的额

background-origin:padding-box背景相对于内边距框来定位
background-origin:border-box;背景相对于边框盒来定位
background-origin:conten-box;背景相对于内容匡来定位

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

background-size:宽度高度

如果只设置第一个值,第二个值会被设置为auto

background-size:% %

如果只设置第一个值,第二个值会被设置为auto

background-size:cover;扩大图像到适合边框为止(即放大图像,然后放进,图像可能有一部分不在边框内)
background-size:contain;拉伸图像到适合边框为止

来自为知笔记(Wiz)

[2016-01-17][CSS][背景相关的属性]

标签：

原文地址：http://www.cnblogs.com/qhy285571052/p/5137518.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！