背景 显示背景用背景属性 所有背景属性都不能继承 1 背景色 background-color 2 背景图 background-image: url(img/hebe.jpg); background-repeat: no-repeat; //图片不重复 3 背景重复 background-repeat: no-repeat; 都不平铺 background-repeat: repeat-y; //图片沿x轴重复 background-repeat: repeat-x;//图片沿y轴重复 4 背景定位(移动背景图) background-position: 200px 200px;//距离左边200px,距离上边200px。 background-position: 200px;//如果只有一个值,则高度默认是50%。 background-position: 50% 50%;第一个表示宽,第二个表示高//百分比(剩以父亲的宽高),像素,left、right、center、top、button (元素的宽-图片的宽)*50% 宽偏移的距离 (元素的高-图片的高)*50% 高偏移的距离 最大的用处:css sprite css雪碧技术或css精灵 精灵图就是把背景图上下移动来展示图标 5 背景固定 background-attachment:fixed 固定背景图,不随滚动条滚动 6 设置背景图片大小 设置背景图片尺寸 background-size:100px 100px;设置图片的宽高,在100*100方框中能看到完整的图 background-size:100px; 设置图片宽度为100px,高度根据原图的宽高比例,得到设置后的高度 background-size:20%; 参照物是本元素,图片宽度是本元素的20%,得出图片宽度,然后根据原图的宽高比例,得到设置后的高度 CSS3 background-origin 属性 background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-Box、padding-Box 或 border-Box 区域。 CSS3 多重背景图片 允许您为元素使用多个背景图像。 background-image:url(bg_flower.gif),url(bg_flower_2.gif); 注意:background简写,上面不要写background单一属性,会覆盖。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。